-
-
{id}
+
+
+
+
>
)
}
+
diff --git a/web/src/styles/session.css b/web/src/styles/session.css
new file mode 100644
index 0000000000000000000000000000000000000000..6a031ad1501a93788b0a7375d7c3f6ea03d1c14a
--- /dev/null
+++ b/web/src/styles/session.css
@@ -0,0 +1,122 @@
+/* Session view — ported from prototype.css */
+
+/* ─── Session aside (turn list) ─── */
+.session-aside {
+ border-right: 1px solid var(--rule-2);
+ overflow: auto;
+ background: var(--paper-3);
+ min-height: 0;
+ flex: 0 0 240px;
+ width: 240px;
+}
+
+.session-aside-row {
+ display: grid;
+ grid-template-columns: 24px 14px 1fr 36px;
+ padding: 3px 10px;
+ font-size: 11px;
+ gap: 8px;
+ background: transparent;
+ border-left: 2px solid transparent;
+ cursor: pointer;
+ align-items: center;
+}
+
+.session-aside-row:hover {
+ background: var(--paper-2);
+}
+
+.session-aside-row.selected {
+ background: var(--paper-2);
+ border-left: 2px solid var(--accent);
+}
+
+/* ─── Transcript ─── */
+.transcript {
+ overflow: auto;
+ min-height: 0;
+ flex: 1;
+}
+
+/* ─── Turn cards ─── */
+.turn {
+ padding: 10px 16px;
+ border-bottom: 1px solid var(--rule-2);
+ border-left: 3px solid transparent;
+ cursor: pointer;
+}
+
+.turn.user { background: var(--turn-user); border-left-color: var(--ink-4); }
+.turn.assistant { background: var(--turn-asst); border-left-color: var(--accent); }
+.turn.tool { background: var(--turn-tool); }
+
+.turn.selected { outline: 1px solid var(--accent); outline-offset: -1px; }
+
+/* ─── Turn meta line ─── */
+.turn-meta {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ margin-bottom: 4px;
+ font-size: 10.5px;
+ color: var(--ink-3);
+}
+
+.turn-meta .role-USER { font-family: var(--mono); font-weight: 600; color: var(--ink-2); letter-spacing: 0.04em; }
+.turn-meta .role-ASSISTANT { font-family: var(--mono); font-weight: 600; color: var(--accent-ink); letter-spacing: 0.04em; }
+.turn-meta .role-TOOL { font-family: var(--mono); font-weight: 600; color: var(--ink-3); letter-spacing: 0.04em; }
+
+/* ─── Turn body ─── */
+.turn-body {
+ font-size: 13px;
+ line-height: 1.55;
+ color: var(--ink);
+ flex: none;
+ overflow: visible;
+}
+
+.turn.tool .turn-body {
+ font-family: var(--mono);
+ font-size: 11.5px;
+ white-space: pre-wrap;
+}
+
+/* ─── Markdown inside turn body ─── */
+.turn-body p { margin: 0 0 0.5em; }
+.turn-body p:last-child { margin-bottom: 0; }
+.turn-body ul,
+.turn-body ol { margin: 0.25em 0 0.5em 1.4em; padding: 0; }
+.turn-body li { margin-bottom: 0.2em; }
+.turn-body code {
+ font-family: var(--mono);
+ font-size: 0.9em;
+ background: var(--paper-2);
+ border-radius: 2px;
+ padding: 0 3px;
+}
+.turn-body pre {
+ background: var(--paper-2);
+ border: 1px solid var(--rule-2);
+ border-radius: 3px;
+ padding: 8px 10px;
+ overflow-x: auto;
+ margin: 0.4em 0;
+}
+.turn-body pre code {
+ background: transparent;
+ padding: 0;
+ font-size: 11.5px;
+}
+.turn-body blockquote {
+ border-left: 3px solid var(--rule);
+ margin: 0.4em 0;
+ padding-left: 10px;
+ color: var(--ink-3);
+}
+.turn-body h1,
+.turn-body h2,
+.turn-body h3 {
+ font-size: inherit;
+ font-weight: 600;
+ margin: 0.5em 0 0.25em;
+}