feat: isolate Claude and Codex session sources

Persist platform_source across session creation, transcript ingestion, API query paths, and viewer state so Claude and Codex data can coexist without bleeding into each other.

- add platform-source normalization helpers and persist platform_source in sdk_sessions via migration 24 with backfill and indexing
- thread platformSource through CLI hooks, transcript processing, context generation, pagination, search routes, SSE payloads, and session management
- expose source-aware project catalogs, viewer tabs, context preview selectors, and source badges for observations, prompts, and summaries
- start the transcript watcher from the worker for transcript-based clients and preserve platform source during Codex ingestion
- auto-start the worker from the MCP server for MCP-only clients and tighten stdio-driven cleanup during shutdown
- keep createSDKSession backward compatible with existing custom-title callers while allowing explicit platform source forwarding

src/ui/viewer-template.html

@@ -355,6 +355,14 @@
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
     }
 
+    .header-main {
+      display: flex;
+      align-items: center;
+      gap: 18px;
+      min-width: 0;
+      flex-wrap: wrap;
+    }
+
     .sidebar-header {
       padding: 14px 18px;
       border-bottom: 1px solid var(--color-border-primary);
@@ -549,6 +557,42 @@
       font-size: 13px;
     }
 
+    .source-tabs {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+
+    .source-tab {
+      background: transparent;
+      border: 1px solid var(--color-border-primary);
+      color: var(--color-text-secondary);
+      border-radius: 999px;
+      padding: 6px 12px;
+      font-size: 12px;
+      line-height: 1;
+      font-weight: 600;
+      letter-spacing: 0.01em;
+      cursor: pointer;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      white-space: nowrap;
+    }
+
+    .source-tab:hover {
+      background: var(--color-bg-card-hover);
+      border-color: var(--color-border-focus);
+      color: var(--color-text-primary);
+      transform: translateY(-1px);
+    }
+
+    .source-tab.active {
+      background: linear-gradient(135deg, var(--color-bg-button) 0%, var(--color-accent-primary) 100%);
+      border-color: var(--color-bg-button);
+      color: var(--color-text-button);
+      box-shadow: 0 2px 8px rgba(9, 105, 218, 0.18);
+    }
+
     .settings-btn,
     .theme-toggle-btn {
       background: var(--color-bg-card);
@@ -887,6 +931,49 @@
       letter-spacing: 0.5px;
     }
 
+    .card-source {
+      padding: 2px 8px;
+      border-radius: 999px;
+      font-weight: 600;
+      font-size: 10px;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      border: 1px solid transparent;
+    }
+
+    .source-claude {
+      background: rgba(255, 138, 61, 0.12);
+      color: #c25a00;
+      border-color: rgba(255, 138, 61, 0.22);
+    }
+
+    .source-codex {
+      background: rgba(33, 150, 243, 0.12);
+      color: #0f5ba7;
+      border-color: rgba(33, 150, 243, 0.24);
+    }
+
+    .source-cursor {
+      background: rgba(124, 58, 237, 0.12);
+      color: #6d28d9;
+      border-color: rgba(124, 58, 237, 0.24);
+    }
+
+    [data-theme="dark"] .source-claude {
+      color: #ffb067;
+      border-color: rgba(255, 176, 103, 0.2);
+    }
+
+    [data-theme="dark"] .source-codex {
+      color: #8fc7ff;
+      border-color: rgba(143, 199, 255, 0.2);
+    }
+
+    [data-theme="dark"] .source-cursor {
+      color: #c4b5fd;
+      border-color: rgba(196, 181, 253, 0.2);
+    }
+
     .card-title {
       font-size: 17px;
       margin-bottom: 14px;
@@ -1483,6 +1570,10 @@
         padding: 14px 20px;
       }
 
+      .header-main {
+        gap: 12px;
+      }
+
       .status {
         gap: 6px;
       }
@@ -1491,6 +1582,11 @@
         max-width: 160px;
       }
 
+      .source-tab {
+        padding: 6px 10px;
+        font-size: 11px;
+      }
+
       /* Hide icon links (docs, github, twitter) on tablet */
       .icon-link {
         display: none;
@@ -1544,6 +1640,27 @@
         gap: 8px;
       }
 
+      .header-main {
+        gap: 10px;
+      }
+
+      .source-tabs {
+        width: 100%;
+        overflow-x: auto;
+        padding-bottom: 2px;
+        scrollbar-width: none;
+      }
+
+      .source-tabs::-webkit-scrollbar {
+        display: none;
+      }
+
+      .source-tab {
+        flex-shrink: 0;
+        padding: 5px 10px;
+        font-size: 11px;
+      }
+
       .logomark {
         height: 28px;
       }
@@ -1732,6 +1849,11 @@
       white-space: nowrap;
     }
 
+    .preview-selector select:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
     .preview-selector select {
       background: var(--color-bg-card);
       border: 1px solid var(--color-border-primary);
@@ -2873,4 +2995,4 @@
   <script src="viewer-bundle.js"></script>
 </body>
 
-</html>
+</html>