Chain visualization, zoom levels, modal with full conversation context, sync button

session-analytics-web/wwwroot/style.css

@@ -98,9 +98,14 @@ header h1 { font-size: 1.1rem; font-weight: 600; color: var(--accent); }
 #chart {
   display: flex;
   align-items: flex-end;
-  gap: 2px;
+  gap: 1px;
   height: 140px;
   width: 100%;
+  margin-top: 16px;
+}
+
+#chart-labels {
+  gap: 1px;
 }
 
 .bar-wrapper {
@@ -114,6 +119,9 @@ header h1 { font-size: 1.1rem; font-weight: 600; color: var(--accent); }
   position: relative;
 }
 
+.bar-in-chain { gap: 0; }
+.bar-spacer { width: 10px; min-width: 10px; flex: 0 0 10px; }
+
 .bar {
   width: 100%;
   min-width: 4px;
@@ -228,6 +236,7 @@ header h1 { font-size: 1.1rem; font-weight: 600; color: var(--accent); }
 .entry-flat {
   background: var(--surface);
   border: 1px solid var(--border);
+  border-left: 3px solid var(--green);
   border-radius: 8px;
   margin-bottom: 4px;
   padding: 10px 16px;
@@ -265,13 +274,117 @@ header h1 { font-size: 1.1rem; font-weight: 600; color: var(--accent); }
   color: var(--muted); font-size: 1.2rem; cursor: pointer;
 }
 
+/* Chain messages */
+.chain-msg {
+  padding: 12px 14px;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.chain-user {
+  background: #1e2d5a;
+  border-left: 3px solid var(--accent);
+}
+
+.chain-assistant {
+  background: #1a2a2a;
+  border-left: 3px solid var(--green);
+}
+
+.chain-header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 6px;
+  font-size: 0.72rem;
+}
+
+.chain-role {
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.chain-user .chain-role { color: var(--accent); }
+.chain-assistant .chain-role { color: var(--green); }
+
+.chain-time  { color: var(--muted); font-family: monospace; }
+.chain-model { color: var(--muted); }
+.chain-cost  { color: var(--green); font-weight: 600; }
+
+/* Chain summary in modal */
+.chain-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  margin-bottom: 10px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.chain-summary-cost {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--green);
+}
+
+.chain-summary-count {
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+/* Chain cost label above first bar */
+.chain-cost-label {
+  font-size: 0.55rem;
+  font-weight: 700;
+  white-space: nowrap;
+  pointer-events: none;
+  position: absolute;
+  top: -2px;
+  transform: translateY(-100%);
+}
+
+.chain-highlighted {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  box-shadow: 0 0 12px rgba(108, 142, 245, 0.3);
+}
+
+.chain-body {
+  font-size: 0.82rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 300px;
+  overflow-y: auto;
+  color: var(--text);
+}
+
+/* Raw JSON toggle */
+.raw-json {
+  margin-top: 12px;
+  border-top: 1px solid var(--border);
+  padding-top: 8px;
+}
+
+.raw-json summary {
+  cursor: pointer;
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
 #modal-content {
   font-family: monospace;
-  font-size: 0.78rem;
+  font-size: 0.72rem;
   white-space: pre-wrap;
   word-break: break-all;
-  color: var(--text);
-  line-height: 1.5;
+  color: var(--muted);
+  line-height: 1.4;
+  max-height: 300px;
+  overflow-y: auto;
+  margin-top: 8px;
 }
 
 ::-webkit-scrollbar { width: 6px; }