instar 0.18.4 → 0.18.6

package/dashboard/index.html

@@ -6,6 +6,8 @@
   <title>Instar Dashboard</title>
   <link rel="icon" type="image/png" href="/dashboard/favicon.png">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/github-dark.min.css"
+    integrity="sha384-wH75j6z1lH97ZOpMOInqhgKzFkAInZPPSPlZpYKYTOqsaizPvhQZmAtLcPKXpLyH" crossorigin="anonymous">
   <style>
     :root {
       --bg: #0a0a0a;
@@ -522,6 +524,569 @@
     ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
     ::-webkit-scrollbar-thumb:hover { background: #444; }
 
+    /* ── Tab bar ──────────────────────────────────────────── */
+    .tab-bar {
+      display: flex;
+      gap: 0;
+      margin-left: 24px;
+    }
+
+    .tab-bar .tab {
+      padding: 6px 16px;
+      border: 1px solid var(--border);
+      border-radius: 6px 6px 0 0;
+      background: var(--bg);
+      color: var(--text-dim);
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      border-bottom: none;
+      margin-bottom: -1px;
+      transition: color 0.15s, background 0.15s;
+    }
+
+    .tab-bar .tab:hover {
+      color: var(--text);
+      background: var(--bg-hover);
+    }
+
+    .tab-bar .tab.active {
+      background: var(--bg-panel);
+      color: var(--accent);
+      border-color: var(--border);
+    }
+
+    .tab-bar .tab-count {
+      font-size: 11px;
+      padding: 1px 6px;
+      border-radius: 8px;
+      background: var(--border);
+      color: var(--text-dim);
+      margin-left: 4px;
+    }
+
+    .tab-content {
+      display: contents;
+    }
+
+    .tab-content.hidden {
+      display: none !important;
+    }
+
+    /* ── File viewer ─────────────────────────────────────── */
+    .files-container {
+      display: flex;
+      grid-column: 1 / -1;
+      overflow: hidden;
+      background: var(--bg);
+    }
+
+    .file-tree {
+      width: 280px;
+      min-width: 280px;
+      border-right: 1px solid var(--border);
+      background: var(--bg-panel);
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .file-tree-header {
+      padding: 16px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .file-tree-header h2 {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-dim);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .file-tree-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px;
+    }
+
+    .tree-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--text);
+      min-height: 44px;
+      transition: background 0.15s;
+      user-select: none;
+    }
+
+    .tree-item:hover {
+      background: var(--bg-hover);
+    }
+
+    .tree-item.active {
+      background: var(--bg-active);
+      color: var(--text-bright);
+    }
+
+    .tree-item .icon {
+      font-size: 14px;
+      flex-shrink: 0;
+      width: 20px;
+      text-align: center;
+    }
+
+    .tree-item .name {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .tree-item .chevron {
+      font-size: 10px;
+      color: var(--text-dim);
+      transition: transform 0.15s;
+      flex-shrink: 0;
+    }
+
+    .tree-item .chevron.open {
+      transform: rotate(90deg);
+    }
+
+    .tree-children {
+      padding-left: 16px;
+    }
+
+    .tree-children.collapsed {
+      display: none;
+    }
+
+    .file-content-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      background: var(--bg);
+    }
+
+    .file-content-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 16px;
+      border-bottom: 1px solid var(--border);
+      background: var(--bg-panel);
+      min-height: 44px;
+      gap: 8px;
+    }
+
+    .breadcrumbs {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 13px;
+      color: var(--text-dim);
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+    }
+
+    .breadcrumbs .crumb {
+      cursor: pointer;
+      color: var(--accent-dim);
+      white-space: nowrap;
+    }
+
+    .breadcrumbs .crumb:hover {
+      color: var(--accent);
+      text-decoration: underline;
+    }
+
+    .breadcrumbs .crumb.current {
+      color: var(--text-bright);
+      cursor: default;
+    }
+
+    .breadcrumbs .crumb.current:hover {
+      text-decoration: none;
+    }
+
+    .breadcrumbs .sep {
+      color: var(--text-dim);
+      flex-shrink: 0;
+    }
+
+    .file-badges {
+      display: flex;
+      gap: 6px;
+      flex-shrink: 0;
+    }
+
+    .file-badge {
+      font-size: 11px;
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-weight: 500;
+    }
+
+    .file-badge.readonly {
+      background: #1b2e4e;
+      color: #60a5fa;
+    }
+
+    .file-badge.editable {
+      background: #1b3e1b;
+      color: #86efac;
+    }
+
+    .file-badge.copy-btn {
+      background: var(--bg);
+      color: var(--text);
+      border: 1px solid var(--border);
+      cursor: pointer;
+    }
+
+    .file-badge.copy-btn:hover {
+      border-color: #333;
+      background: var(--bg-hover);
+    }
+
+    .file-content-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+    }
+
+    .file-content-body .markdown-content {
+      line-height: 1.6;
+      color: var(--text);
+    }
+
+    .file-content-body .markdown-content h1,
+    .file-content-body .markdown-content h2,
+    .file-content-body .markdown-content h3,
+    .file-content-body .markdown-content h4 {
+      color: var(--text-bright);
+      margin-top: 1.5em;
+      margin-bottom: 0.5em;
+    }
+
+    .file-content-body .markdown-content h1 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
+    .file-content-body .markdown-content h2 { font-size: 1.3em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
+    .file-content-body .markdown-content h3 { font-size: 1.1em; }
+
+    .file-content-body .markdown-content p { margin: 0.8em 0; }
+
+    .file-content-body .markdown-content a {
+      color: var(--accent);
+      text-decoration: none;
+    }
+
+    .file-content-body .markdown-content a:hover {
+      text-decoration: underline;
+    }
+
+    .file-content-body .markdown-content code {
+      background: #1a1a1a;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      font-size: 0.9em;
+    }
+
+    .file-content-body .markdown-content pre {
+      background: #1a1a1a;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 12px;
+      overflow-x: auto;
+      margin: 1em 0;
+    }
+
+    .file-content-body .markdown-content pre code {
+      background: none;
+      padding: 0;
+      font-size: 13px;
+    }
+
+    .file-content-body .markdown-content blockquote {
+      border-left: 3px solid var(--accent-dim);
+      padding-left: 12px;
+      color: var(--text-dim);
+      margin: 1em 0;
+    }
+
+    .file-content-body .markdown-content table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 1em 0;
+    }
+
+    .file-content-body .markdown-content th,
+    .file-content-body .markdown-content td {
+      border: 1px solid var(--border);
+      padding: 6px 12px;
+      text-align: left;
+    }
+
+    .file-content-body .markdown-content th {
+      background: var(--bg-panel);
+      color: var(--text-bright);
+    }
+
+    .file-content-body .markdown-content ul,
+    .file-content-body .markdown-content ol {
+      margin: 0.8em 0;
+      padding-left: 1.5em;
+    }
+
+    .file-content-body .markdown-content li {
+      margin: 0.3em 0;
+    }
+
+    .file-content-body .markdown-content img {
+      max-width: 100%;
+    }
+
+    .file-content-body .code-content {
+      font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
+      font-size: 13px;
+      line-height: 1.5;
+      white-space: pre;
+      overflow-x: auto;
+      color: var(--text);
+      tab-size: 2;
+    }
+
+    .file-content-body .code-content pre {
+      margin: 0;
+    }
+
+    .file-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: var(--text-dim);
+      gap: 12px;
+    }
+
+    .file-empty .icon { font-size: 48px; opacity: 0.3; }
+    .file-empty p { font-size: 14px; text-align: center; }
+
+    .file-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: var(--text-dim);
+      font-size: 14px;
+    }
+
+    .file-error {
+      padding: 16px;
+      color: var(--red);
+      font-size: 14px;
+    }
+
+    /* File viewer back button (mobile) */
+    .files-back-btn {
+      display: none;
+      padding: 6px 12px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: var(--bg);
+      color: var(--text);
+      font-size: 13px;
+      cursor: pointer;
+      margin-right: 8px;
+      flex-shrink: 0;
+    }
+
+    .files-back-btn:hover { background: var(--bg-hover); }
+
+    /* ── Editor mode (Phase 2) ───────────────────────────────── */
+    .file-editor {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .file-editor textarea {
+      flex: 1;
+      width: 100%;
+      border: none;
+      background: #0d0d0d;
+      color: var(--text);
+      font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
+      font-size: 14px;
+      line-height: 1.5;
+      padding: 16px;
+      resize: none;
+      outline: none;
+      tab-size: 2;
+      box-sizing: border-box;
+    }
+
+    /* iOS zoom prevention: 16px minimum */
+    @supports (-webkit-touch-callout: none) {
+      .file-editor textarea { font-size: 16px; }
+    }
+
+    .editor-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      border-top: 1px solid var(--border);
+      background: var(--bg-panel);
+      flex-shrink: 0;
+    }
+
+    .editor-toolbar .btn {
+      padding: 6px 16px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      min-height: 36px;
+    }
+
+    .editor-toolbar .btn-save {
+      background: var(--accent);
+      color: #000;
+      border-color: var(--accent);
+    }
+
+    .editor-toolbar .btn-save:hover { opacity: 0.9; }
+
+    .editor-toolbar .btn-cancel {
+      background: var(--bg);
+      color: var(--text);
+    }
+
+    .editor-toolbar .btn-cancel:hover { background: var(--bg-hover); }
+
+    .editor-toolbar .shortcut-hint {
+      font-size: 11px;
+      color: var(--text-dim);
+      margin-left: auto;
+    }
+
+    .editor-toolbar .save-status {
+      font-size: 12px;
+      margin-left: 8px;
+    }
+
+    .editor-toolbar .save-status.saving { color: var(--text-dim); }
+    .editor-toolbar .save-status.saved { color: var(--accent); }
+    .editor-toolbar .save-status.error { color: var(--red); }
+
+    /* Toast notifications */
+    .toast-container {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .toast {
+      padding: 10px 16px;
+      border-radius: 8px;
+      font-size: 13px;
+      color: #fff;
+      animation: toastIn 0.2s ease-out;
+      max-width: 360px;
+    }
+
+    .toast.success { background: #166534; border: 1px solid #22c55e; }
+    .toast.error { background: #7f1d1d; border: 1px solid #ef4444; }
+    .toast.warning { background: #713f12; border: 1px solid #eab308; }
+
+    @keyframes toastIn {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    /* Conflict dialog */
+    .conflict-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.7);
+      z-index: 10000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .conflict-dialog {
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 24px;
+      max-width: 400px;
+      width: 90%;
+    }
+
+    .conflict-dialog h3 {
+      color: #eab308;
+      margin: 0 0 12px;
+      font-size: 16px;
+    }
+
+    .conflict-dialog p {
+      color: var(--text-dim);
+      font-size: 13px;
+      margin: 0 0 16px;
+      line-height: 1.5;
+    }
+
+    .conflict-dialog .conflict-actions {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .conflict-dialog .conflict-actions .btn {
+      padding: 8px 16px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      font-size: 13px;
+      cursor: pointer;
+      min-height: 36px;
+    }
+
+    .conflict-dialog .btn-overwrite {
+      background: #7f1d1d;
+      color: #fff;
+      border-color: #ef4444;
+    }
+
+    .conflict-dialog .btn-reload {
+      background: var(--accent);
+      color: #000;
+      border-color: var(--accent);
+    }
+
+    .conflict-dialog .btn-dismiss {
+      background: var(--bg);
+      color: var(--text);
+    }
+
     /* ── Mobile responsive ─────────────────────────────────── */
     @media (max-width: 768px) {
       .app {
@@ -644,6 +1209,68 @@
       .sidebar-header {
         padding: 12px 14px;
       }
+
+      /* Tab bar compact */
+      .tab-bar {
+        margin-left: 12px;
+      }
+
+      .tab-bar .tab {
+        padding: 5px 12px;
+        font-size: 12px;
+      }
+
+      /* File viewer mobile */
+      .files-container {
+        flex-direction: column;
+      }
+
+      .file-tree {
+        width: 100%;
+        min-width: 100%;
+        border-right: none;
+        border-bottom: 1px solid var(--border);
+      }
+
+      .app.files-active .file-tree {
+        display: none;
+      }
+
+      .app:not(.files-active) .file-content-panel {
+        display: none;
+      }
+
+      .app.files-active .files-back-btn {
+        display: inline-block;
+      }
+
+      .tree-item {
+        padding: 12px 12px;
+        font-size: 15px;
+      }
+
+      .file-content-body {
+        padding: 12px;
+      }
+
+      .file-content-body .code-content {
+        font-size: 12px;
+      }
+
+      /* Editor mobile */
+      .editor-toolbar {
+        padding: 8px 12px;
+        flex-wrap: wrap;
+      }
+
+      .editor-toolbar .shortcut-hint {
+        display: none;
+      }
+
+      .editor-toolbar .btn {
+        min-height: 44px;
+        padding: 10px 16px;
+      }
     }
   </style>
 </head>
@@ -665,6 +1292,10 @@
       <div class="header-left">
         <img class="logo" src="/dashboard/logo.png" alt="Instar">
         <h1>Instar Dashboard</h1>
+        <nav class="tab-bar">
+          <button class="tab active" data-tab="sessions" onclick="switchTab('sessions')">Sessions <span class="tab-count" id="tabSessionCount">0</span></button>
+          <button class="tab" data-tab="files" onclick="switchTab('files')">Files</button>
+        </nav>
       </div>
       <button class="wa-status-btn" id="waStatusBtn" onclick="toggleQrPanel()">WhatsApp</button>
       <div class="status-badge" id="connStatus">
@@ -673,7 +1304,8 @@
       </div>
     </header>
 
-    <aside class="sidebar">
+    <!-- Sessions tab -->
+    <aside class="sidebar" id="sessionsTab">
       <div class="sidebar-header">
         <h2>Sessions</h2>
         <span class="session-count" id="sessionCount">0</span>
@@ -721,6 +1353,47 @@
         </div>
       </div>
     </main>
+
+    <!-- Files tab -->
+    <div class="files-container" id="filesTab" style="display:none">
+      <div class="file-tree" id="fileTree">
+        <div class="file-tree-header">
+          <h2>Files</h2>
+        </div>
+        <div class="file-tree-list" id="fileTreeList">
+          <div class="file-loading" id="fileTreeLoading">Loading...</div>
+        </div>
+      </div>
+      <div class="file-content-panel" id="fileContentPanel">
+        <div class="file-content-header" id="fileContentHeader" style="display:none">
+          <button class="files-back-btn" onclick="filesGoBack()">&larr;</button>
+          <div class="breadcrumbs" id="fileBreadcrumbs"></div>
+          <div class="file-badges" id="fileBadges"></div>
+        </div>
+        <div class="file-content-body" id="fileContentBody">
+          <div class="file-empty" id="fileEmptyState">
+            <div class="icon">&#x1F4C2;</div>
+            <p>Select a file to view its contents</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Toast notifications -->
+  <div class="toast-container" id="toastContainer"></div>
+
+  <!-- Conflict resolution dialog -->
+  <div class="conflict-overlay" id="conflictOverlay" style="display:none">
+    <div class="conflict-dialog">
+      <h3>File Modified Externally</h3>
+      <p id="conflictMessage">This file was modified by another process since you started editing.</p>
+      <div class="conflict-actions">
+        <button class="btn btn-overwrite" onclick="handleConflictOverwrite()">Overwrite</button>
+        <button class="btn btn-reload" onclick="handleConflictReload()">Reload</button>
+        <button class="btn btn-dismiss" onclick="hideConflictDialog()">Cancel</button>
+      </div>
+    </div>
   </div>
 
   <!-- WhatsApp QR panel (hidden by default) -->
@@ -732,6 +1405,12 @@
     <div id="waQrContainer"></div>
   </div>
 
+  <script src="https://cdn.jsdelivr.net/npm/marked@15.0.7/marked.min.js"
+    integrity="sha384-H+hy9ULve6xfxRkWIh/YOtvDdpXgV2fmAGQkIDTxIgZwNoaoBal14Di2YTMR6MzR" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.4/dist/purify.min.js"
+    integrity="sha384-eEu5CTj3qGvu9PdJuS+YlkNi7d2XxQROAFYOr59zgObtlcux1ae1Il3u7jvdCSWu" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"
+    integrity="sha384-RH2xi4eIQ/gjtbs9fUXM68sLSi99C7ZWBRX1vDrVv6GQXRibxXLbwO2NGZB74MbU" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.4/build/qrcode.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
@@ -917,6 +1596,9 @@
       const count = document.getElementById('sessionCount');
 
       count.textContent = sessions.length;
+      // Keep tab bar count in sync
+      const tabCount = document.getElementById('tabSessionCount');
+      if (tabCount) tabCount.textContent = sessions.length;
 
       if (sessions.length === 0) {
         empty.style.display = 'flex';
@@ -1312,6 +1994,771 @@
         sendKey('C-c');
       }
     });
+
+    // ── Tab System ─────────────────────────────────────────────
+    let currentTab = 'sessions';
+
+    function switchTab(tabName) {
+      if (tabName === currentTab) return;
+      currentTab = tabName;
+
+      // Update tab buttons
+      document.querySelectorAll('.tab-bar .tab').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.tab === tabName);
+      });
+
+      // Toggle tab content visibility
+      const sessionsTab = document.getElementById('sessionsTab');
+      const mainPanel = document.getElementById('mainPanel');
+      const filesTab = document.getElementById('filesTab');
+
+      if (tabName === 'sessions') {
+        sessionsTab.style.display = '';
+        mainPanel.style.display = '';
+        filesTab.style.display = 'none';
+      } else if (tabName === 'files') {
+        sessionsTab.style.display = 'none';
+        mainPanel.style.display = 'none';
+        filesTab.style.display = 'flex';
+        // Load file tree on first switch
+        if (!fileTreeLoaded) loadFileTree();
+      }
+
+      // Update URL
+      updateFileUrl();
+    }
+
+    // ── File Viewer ────────────────────────────────────────────
+    let fileTreeLoaded = false;
+    let currentFilePath = '';
+    let fileTreeCache = new Map(); // path -> entries
+    let expandedDirs = new Set();
+    let isEditing = false;
+    let editOriginalContent = '';
+    let editModifiedTimestamp = '';  // for optimistic concurrency
+    let hasUnsavedChanges = false;
+
+    const FILE_ICONS = {
+      directory: '\uD83D\uDCC1', // folder
+      '.md': '\uD83D\uDCDD',     // memo
+      '.json': '\u2699\uFE0F',   // gear
+      '.ts': '\uD83D\uDCDC',     // scroll
+      '.js': '\uD83D\uDCDC',
+      '.tsx': '\uD83D\uDCDC',
+      '.jsx': '\uD83D\uDCDC',
+      '.yaml': '\u2699\uFE0F',
+      '.yml': '\u2699\uFE0F',
+      '.sh': '\uD83D\uDCDC',
+      '.py': '\uD83D\uDCDC',
+      default: '\uD83D\uDCC4',   // page
+    };
+
+    function getFileIcon(name, type) {
+      if (type === 'directory') return FILE_ICONS.directory;
+      const ext = '.' + name.split('.').pop();
+      return FILE_ICONS[ext] || FILE_ICONS.default;
+    }
+
+    function getLanguage(filename) {
+      const ext = filename.split('.').pop()?.toLowerCase();
+      const langMap = {
+        ts: 'typescript', tsx: 'typescript', js: 'javascript', jsx: 'javascript',
+        json: 'json', yaml: 'yaml', yml: 'yaml', sh: 'bash', bash: 'bash',
+        py: 'python', rb: 'ruby', go: 'go', rs: 'rust', css: 'css',
+        html: 'html', xml: 'xml', sql: 'sql', md: 'markdown',
+        toml: 'toml', ini: 'ini', dockerfile: 'dockerfile',
+      };
+      return langMap[ext] || null;
+    }
+
+    async function apiFetch(url) {
+      const resp = await fetch(url, {
+        headers: { 'Authorization': `Bearer ${token}` },
+      });
+      if (!resp.ok) {
+        const data = await resp.json().catch(() => ({}));
+        throw new Error(data.error || `HTTP ${resp.status}`);
+      }
+      return resp.json();
+    }
+
+    async function loadFileTree() {
+      fileTreeLoaded = true;
+      const list = document.getElementById('fileTreeList');
+      const loading = document.getElementById('fileTreeLoading');
+
+      try {
+        loading.style.display = 'flex';
+        const data = await apiFetch('/api/files/list?path=');
+        loading.style.display = 'none';
+
+        if (!data.entries || data.entries.length === 0) {
+          list.innerHTML = '<div class="file-empty"><p>No directories configured for viewing.<br>Ask your agent to set up the file viewer.</p></div>';
+          return;
+        }
+
+        fileTreeCache.set('', data.entries);
+        renderFileTree();
+      } catch (err) {
+        loading.style.display = 'none';
+        list.innerHTML = `<div class="file-error">Failed to load files: ${escapeHtml(err.message)}</div>`;
+      }
+    }
+
+    function renderFileTree() {
+      const list = document.getElementById('fileTreeList');
+      const rootEntries = fileTreeCache.get('') || [];
+      list.innerHTML = '';
+
+      for (const entry of rootEntries) {
+        const entryPath = entry.name;
+        renderTreeNode(list, entry, entryPath);
+      }
+    }
+
+    function renderTreeNode(container, entry, entryPath) {
+      const item = document.createElement('div');
+      item.className = 'tree-item' + (entryPath === currentFilePath ? ' active' : '');
+      item.dataset.path = entryPath;
+
+      const icon = document.createElement('span');
+      icon.className = 'icon';
+      icon.textContent = getFileIcon(entry.name, entry.type);
+      item.appendChild(icon);
+
+      const name = document.createElement('span');
+      name.className = 'name';
+      name.textContent = entry.name;
+      item.appendChild(name);
+
+      if (entry.type === 'directory') {
+        const chevron = document.createElement('span');
+        chevron.className = 'chevron' + (expandedDirs.has(entryPath) ? ' open' : '');
+        chevron.textContent = '\u25B6'; // right triangle
+        item.appendChild(chevron);
+
+        item.onclick = (e) => {
+          e.stopPropagation();
+          toggleDirectory(entryPath, item);
+        };
+
+        container.appendChild(item);
+
+        // If expanded, show children
+        if (expandedDirs.has(entryPath)) {
+          const children = document.createElement('div');
+          children.className = 'tree-children';
+          children.id = 'tree-children-' + entryPath.replace(/[^a-zA-Z0-9]/g, '_');
+
+          const cached = fileTreeCache.get(entryPath);
+          if (cached) {
+            for (const child of cached) {
+              const childPath = entryPath + '/' + child.name;
+              renderTreeNode(children, child, childPath);
+            }
+          }
+
+          container.appendChild(children);
+        }
+      } else {
+        item.onclick = (e) => {
+          e.stopPropagation();
+          openFile(entryPath);
+        };
+        container.appendChild(item);
+      }
+    }
+
+    async function toggleDirectory(dirPath, itemEl) {
+      if (expandedDirs.has(dirPath)) {
+        expandedDirs.delete(dirPath);
+      } else {
+        expandedDirs.add(dirPath);
+        // Lazy load if not cached
+        if (!fileTreeCache.has(dirPath)) {
+          try {
+            const data = await apiFetch('/api/files/list?path=' + encodeURIComponent(dirPath));
+            fileTreeCache.set(dirPath, data.entries || []);
+          } catch (err) {
+            console.error('Failed to load directory:', err);
+            expandedDirs.delete(dirPath);
+            return;
+          }
+        }
+      }
+      renderFileTree();
+    }
+
+    async function openFile(filePath) {
+      // Guard: check unsaved changes before navigating away
+      if (hasUnsavedChanges && !confirm('You have unsaved changes. Discard them?')) {
+        return;
+      }
+      exitEditMode(true); // silent exit, no confirm
+
+      currentFilePath = filePath;
+      const app = document.getElementById('app');
+      app.classList.add('files-active');
+
+      // Update tree selection
+      document.querySelectorAll('.tree-item').forEach(el => {
+        el.classList.toggle('active', el.dataset.path === filePath);
+      });
+
+      // Show header
+      const header = document.getElementById('fileContentHeader');
+      header.style.display = 'flex';
+
+      // Update breadcrumbs
+      renderBreadcrumbs(filePath);
+
+      // Show loading
+      const body = document.getElementById('fileContentBody');
+      body.innerHTML = '<div class="file-loading">Loading...</div>';
+
+      try {
+        const data = await apiFetch('/api/files/read?path=' + encodeURIComponent(filePath));
+
+        if (data.binary) {
+          body.innerHTML = `<div class="file-empty"><div class="icon">&#x1F4E6;</div><p>Binary file (${formatFileSize(data.size)})<br>Preview not available</p></div>`;
+          updateFileBadges(false);
+          editModifiedTimestamp = '';
+          updateFileUrl();
+          return;
+        }
+
+        const content = data.content || '';
+        const filename = filePath.split('/').pop() || '';
+        editModifiedTimestamp = data.modified || '';
+        editOriginalContent = content;
+
+        // Render based on file type
+        if (filename.endsWith('.md')) {
+          renderMarkdown(body, content);
+        } else {
+          renderCode(body, content, filename);
+        }
+
+        updateFileBadges(data.editable);
+        updateFileUrl();
+      } catch (err) {
+        body.innerHTML = `<div class="file-error">Failed to load file: ${escapeHtml(err.message)}</div>`;
+      }
+    }
+
+    function renderBreadcrumbs(filePath) {
+      const container = document.getElementById('fileBreadcrumbs');
+      container.innerHTML = '';
+
+      const parts = filePath.split('/');
+      let accumulated = '';
+
+      for (let i = 0; i < parts.length; i++) {
+        if (i > 0) {
+          const sep = document.createElement('span');
+          sep.className = 'sep';
+          sep.textContent = '/';
+          container.appendChild(sep);
+        }
+
+        const crumb = document.createElement('span');
+        crumb.className = 'crumb' + (i === parts.length - 1 ? ' current' : '');
+        crumb.textContent = parts[i];
+
+        if (i < parts.length - 1) {
+          accumulated += (i > 0 ? '/' : '') + parts[i];
+          const dirPath = accumulated;
+          crumb.onclick = () => {
+            // Navigate to this directory in the tree
+            expandedDirs.add(dirPath);
+            if (!fileTreeCache.has(dirPath)) {
+              apiFetch('/api/files/list?path=' + encodeURIComponent(dirPath))
+                .then(data => {
+                  fileTreeCache.set(dirPath, data.entries || []);
+                  renderFileTree();
+                });
+            }
+            // On mobile, go back to tree
+            filesGoBack();
+          };
+        } else {
+          accumulated += (i > 0 ? '/' : '') + parts[i];
+        }
+
+        container.appendChild(crumb);
+      }
+    }
+
+    function updateFileBadges(editable) {
+      const badges = document.getElementById('fileBadges');
+      badges.innerHTML = '';
+
+      // Read-only / editable badge
+      const badge = document.createElement('span');
+      badge.className = 'file-badge ' + (editable ? 'editable' : 'readonly');
+      badge.textContent = editable ? 'Editable' : 'Read-only';
+      badges.appendChild(badge);
+
+      // Edit button (only for editable files, hidden during edit mode)
+      if (editable && !isEditing) {
+        const editBtn = document.createElement('button');
+        editBtn.className = 'file-badge copy-btn';
+        editBtn.textContent = 'Edit';
+        editBtn.onclick = () => enterEditMode();
+        badges.appendChild(editBtn);
+      }
+
+      // Copy button
+      const copyBtn = document.createElement('button');
+      copyBtn.className = 'file-badge copy-btn';
+      copyBtn.textContent = 'Copy';
+      copyBtn.onclick = () => {
+        const body = document.getElementById('fileContentBody');
+        // Get raw text content — from editor textarea if editing, otherwise from rendered view
+        if (isEditing) {
+          const ta = body.querySelector('.file-editor textarea');
+          if (ta) {
+            navigator.clipboard.writeText(ta.value).then(() => {
+              copyBtn.textContent = 'Copied!';
+              setTimeout(() => { copyBtn.textContent = 'Copy'; }, 1500);
+            });
+            return;
+          }
+        }
+        const pre = body.querySelector('pre');
+        const md = body.querySelector('.markdown-content');
+        let text = '';
+        if (pre) text = pre.textContent || '';
+        else if (md) text = md.textContent || '';
+        navigator.clipboard.writeText(text).then(() => {
+          copyBtn.textContent = 'Copied!';
+          setTimeout(() => { copyBtn.textContent = 'Copy'; }, 1500);
+        });
+      };
+      badges.appendChild(copyBtn);
+    }
+
+    function renderMarkdown(container, content) {
+      if (typeof marked === 'undefined' || typeof DOMPurify === 'undefined') {
+        // Fallback to code view if libs failed to load
+        renderCode(container, content, 'file.md');
+        return;
+      }
+
+      const rawHtml = marked.parse(content);
+      const cleanHtml = DOMPurify.sanitize(rawHtml);
+
+      const div = document.createElement('div');
+      div.className = 'markdown-content';
+      div.innerHTML = cleanHtml;
+
+      // Highlight code blocks within rendered markdown
+      if (typeof hljs !== 'undefined') {
+        div.querySelectorAll('pre code').forEach(block => {
+          // Size guard: skip large blocks
+          if (block.textContent.length > 200000) return;
+          const lines = block.textContent.split('\n').length;
+          if (lines > 2000) return;
+          hljs.highlightElement(block);
+        });
+      }
+
+      container.innerHTML = '';
+      container.appendChild(div);
+    }
+
+    function renderCode(container, content, filename) {
+      const div = document.createElement('div');
+      div.className = 'code-content';
+
+      const pre = document.createElement('pre');
+      const code = document.createElement('code');
+
+      code.textContent = content;
+
+      // Size guard: only highlight small files
+      const shouldHighlight = typeof hljs !== 'undefined' &&
+        content.length <= 200000 &&
+        content.split('\n').length <= 2000;
+
+      if (shouldHighlight) {
+        const lang = getLanguage(filename);
+        if (lang) {
+          code.className = 'language-' + lang;
+        }
+        pre.appendChild(code);
+        div.appendChild(pre);
+        container.innerHTML = '';
+        container.appendChild(div);
+        hljs.highlightElement(code);
+      } else {
+        pre.appendChild(code);
+        div.appendChild(pre);
+        container.innerHTML = '';
+        container.appendChild(div);
+      }
+    }
+
+    function filesGoBack() {
+      // Guard: check unsaved changes before navigating away
+      if (hasUnsavedChanges && !confirm('You have unsaved changes. Discard them?')) {
+        return;
+      }
+      exitEditMode(true); // silent exit
+
+      // Mobile: go back to file tree
+      const app = document.getElementById('app');
+      app.classList.remove('files-active');
+      currentFilePath = '';
+      document.querySelectorAll('.tree-item').forEach(el => el.classList.remove('active'));
+      document.getElementById('fileContentHeader').style.display = 'none';
+      document.getElementById('fileContentBody').innerHTML =
+        '<div class="file-empty"><div class="icon">&#x1F4C2;</div><p>Select a file to view its contents</p></div>';
+      updateFileUrl();
+    }
+
+    function formatFileSize(bytes) {
+      if (bytes < 1024) return bytes + ' B';
+      if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+      return (bytes / 1048576).toFixed(1) + ' MB';
+    }
+
+    // ── Editor (Phase 2) ──────────────────────────────────────
+
+    function enterEditMode() {
+      if (isEditing || !currentFilePath) return;
+      isEditing = true;
+      hasUnsavedChanges = false;
+
+      const body = document.getElementById('fileContentBody');
+
+      // Build editor UI
+      const editor = document.createElement('div');
+      editor.className = 'file-editor';
+
+      const toolbar = document.createElement('div');
+      toolbar.className = 'editor-toolbar';
+
+      const saveBtn = document.createElement('button');
+      saveBtn.className = 'btn btn-save';
+      saveBtn.textContent = 'Save';
+      saveBtn.onclick = saveFile;
+
+      const cancelBtn = document.createElement('button');
+      cancelBtn.className = 'btn btn-cancel';
+      cancelBtn.textContent = 'Cancel';
+      cancelBtn.onclick = () => exitEditMode();
+
+      const hint = document.createElement('span');
+      hint.className = 'shortcut-hint';
+      const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+      hint.textContent = isMac ? '\u2318S to save' : 'Ctrl+S to save';
+
+      const status = document.createElement('span');
+      status.className = 'save-status';
+      status.id = 'saveStatus';
+
+      toolbar.appendChild(saveBtn);
+      toolbar.appendChild(cancelBtn);
+      toolbar.appendChild(hint);
+      toolbar.appendChild(status);
+
+      const textarea = document.createElement('textarea');
+      textarea.value = editOriginalContent;
+      textarea.spellcheck = false;
+      textarea.autocomplete = 'off';
+      textarea.autocapitalize = 'off';
+
+      // Track unsaved changes
+      textarea.addEventListener('input', () => {
+        hasUnsavedChanges = textarea.value !== editOriginalContent;
+      });
+
+      editor.appendChild(toolbar);
+      editor.appendChild(textarea);
+
+      body.innerHTML = '';
+      body.appendChild(editor);
+
+      // Update badges (hides Edit button during editing)
+      updateFileBadges(true);
+
+      // Focus textarea
+      textarea.focus();
+
+      // iOS Safari: adjust for virtual keyboard using visualViewport
+      if (window.visualViewport) {
+        const adjustForKeyboard = () => {
+          const vv = window.visualViewport;
+          const offset = window.innerHeight - vv.height - vv.offsetTop;
+          editor.style.paddingBottom = Math.max(0, offset) + 'px';
+        };
+        window.visualViewport.addEventListener('resize', adjustForKeyboard);
+        window.visualViewport.addEventListener('scroll', adjustForKeyboard);
+        // Clean up when leaving edit mode
+        textarea._vpCleanup = () => {
+          window.visualViewport.removeEventListener('resize', adjustForKeyboard);
+          window.visualViewport.removeEventListener('scroll', adjustForKeyboard);
+        };
+      }
+    }
+
+    function exitEditMode(silent) {
+      if (!isEditing) return;
+      if (!silent && hasUnsavedChanges && !confirm('You have unsaved changes. Discard them?')) {
+        return;
+      }
+
+      // Clean up visualViewport listeners
+      const ta = document.querySelector('.file-editor textarea');
+      if (ta && ta._vpCleanup) ta._vpCleanup();
+
+      isEditing = false;
+      hasUnsavedChanges = false;
+
+      // Re-render the file in view mode
+      if (currentFilePath) {
+        openFile(currentFilePath);
+      }
+    }
+
+    async function saveFile() {
+      if (!isEditing || !currentFilePath) return;
+
+      const textarea = document.querySelector('.file-editor textarea');
+      if (!textarea) return;
+
+      const content = textarea.value;
+      const status = document.getElementById('saveStatus');
+      const saveBtn = document.querySelector('.editor-toolbar .btn-save');
+
+      // Show saving state
+      if (status) { status.textContent = 'Saving...'; status.className = 'save-status saving'; }
+      if (saveBtn) saveBtn.disabled = true;
+
+      try {
+        const resp = await fetch('/api/files/save', {
+          method: 'POST',
+          headers: {
+            'Authorization': 'Bearer ' + token,
+            'Content-Type': 'application/json',
+            'X-Instar-Request': '1',
+          },
+          body: JSON.stringify({
+            path: currentFilePath,
+            content,
+            expectedModified: editModifiedTimestamp,
+          }),
+        });
+
+        const data = await resp.json().catch(() => ({}));
+
+        if (resp.status === 409) {
+          // Conflict — file modified externally
+          showConflictDialog(data.currentModified);
+          if (status) { status.textContent = 'Conflict'; status.className = 'save-status error'; }
+          if (saveBtn) saveBtn.disabled = false;
+          return;
+        }
+
+        if (resp.status === 401) {
+          // Session expired — stash content and re-auth
+          sessionStorage.setItem('instar_edit_stash', JSON.stringify({
+            path: currentFilePath,
+            content,
+            timestamp: Date.now(),
+          }));
+          showToast('Session expired. Please re-authenticate.', 'warning');
+          if (saveBtn) saveBtn.disabled = false;
+          return;
+        }
+
+        if (!resp.ok) {
+          throw new Error(data.error || 'HTTP ' + resp.status);
+        }
+
+        // Success — update baseline
+        editOriginalContent = content;
+        editModifiedTimestamp = data.modified || '';
+        hasUnsavedChanges = false;
+
+        if (status) { status.textContent = 'Saved'; status.className = 'save-status saved'; }
+        showToast('File saved', 'success');
+        setTimeout(() => {
+          if (status && status.textContent === 'Saved') {
+            status.textContent = '';
+            status.className = 'save-status';
+          }
+        }, 3000);
+      } catch (err) {
+        if (status) { status.textContent = 'Error'; status.className = 'save-status error'; }
+        showToast('Save failed: ' + err.message, 'error');
+      } finally {
+        if (saveBtn) saveBtn.disabled = false;
+      }
+    }
+
+    // ── Toast notifications ─────────────────────────────────────
+
+    function showToast(message, type) {
+      const container = document.getElementById('toastContainer');
+      const toast = document.createElement('div');
+      toast.className = 'toast ' + (type || 'success');
+      toast.textContent = message;
+      container.appendChild(toast);
+
+      // Auto-dismiss after 4s
+      setTimeout(() => {
+        toast.style.opacity = '0';
+        toast.style.transform = 'translateX(100%)';
+        setTimeout(() => toast.remove(), 300);
+      }, 4000);
+    }
+
+    // ── Conflict resolution ─────────────────────────────────────
+
+    function showConflictDialog(serverModified) {
+      document.getElementById('conflictOverlay').style.display = 'flex';
+      document.getElementById('conflictOverlay').dataset.serverModified = serverModified || '';
+    }
+
+    function hideConflictDialog() {
+      document.getElementById('conflictOverlay').style.display = 'none';
+    }
+
+    function handleConflictOverwrite() {
+      hideConflictDialog();
+      // Clear expectedModified to force overwrite
+      editModifiedTimestamp = '';
+      saveFile();
+    }
+
+    async function handleConflictReload() {
+      hideConflictDialog();
+      // Reload file, discarding local changes
+      hasUnsavedChanges = false;
+      isEditing = false;
+      await openFile(currentFilePath);
+      // Re-enter edit mode with fresh content
+      enterEditMode();
+    }
+
+    // ── Keyboard shortcuts ──────────────────────────────────────
+
+    document.addEventListener('keydown', (e) => {
+      // Cmd/Ctrl+S to save
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        if (isEditing) {
+          e.preventDefault();
+          saveFile();
+        }
+      }
+      // Escape to exit edit mode
+      if (e.key === 'Escape' && isEditing) {
+        e.preventDefault();
+        exitEditMode();
+      }
+    });
+
+    // ── Unsaved-changes guard ───────────────────────────────────
+
+    window.addEventListener('beforeunload', (e) => {
+      if (hasUnsavedChanges) {
+        e.preventDefault();
+        e.returnValue = '';
+      }
+    });
+
+    // Restore stashed edit after re-auth
+    function restoreEditStash() {
+      const raw = sessionStorage.getItem('instar_edit_stash');
+      if (!raw) return;
+      try {
+        const stash = JSON.parse(raw);
+        // Only restore if recent (< 10 min) and path matches
+        if (Date.now() - stash.timestamp > 600000) {
+          sessionStorage.removeItem('instar_edit_stash');
+          return;
+        }
+        if (stash.path && stash.content) {
+          // Wait for file tree to load, then open + restore
+          const restore = () => {
+            if (!fileTreeLoaded) { setTimeout(restore, 100); return; }
+            openFile(stash.path).then(() => {
+              enterEditMode();
+              const ta = document.querySelector('.file-editor textarea');
+              if (ta) {
+                ta.value = stash.content;
+                hasUnsavedChanges = true;
+              }
+              showToast('Restored unsaved edits from before session timeout', 'warning');
+              sessionStorage.removeItem('instar_edit_stash');
+            });
+          };
+          setTimeout(restore, 200);
+        }
+      } catch { /* ignore bad stash */ }
+    }
+
+    // ── Deep linking via query params ──────────────────────────
+
+    function updateFileUrl() {
+      const params = new URLSearchParams(window.location.search);
+      if (currentTab === 'files') {
+        params.set('tab', 'files');
+        if (currentFilePath) {
+          params.set('path', currentFilePath);
+        } else {
+          params.delete('path');
+        }
+      } else {
+        params.delete('tab');
+        params.delete('path');
+      }
+      const qs = params.toString();
+      const newUrl = window.location.pathname + (qs ? '?' + qs : '');
+      history.replaceState(null, '', newUrl);
+    }
+
+    function handleDeepLink() {
+      const params = new URLSearchParams(window.location.search);
+      const tab = params.get('tab');
+      const filePath = params.get('path');
+
+      if (tab === 'files') {
+        switchTab('files');
+        if (filePath) {
+          // Expand parent directories
+          const parts = filePath.split('/');
+          let accumulated = '';
+          for (let i = 0; i < parts.length - 1; i++) {
+            accumulated += (i > 0 ? '/' : '') + parts[i];
+            expandedDirs.add(accumulated);
+          }
+          // Open the file after tree loads
+          const waitForTree = () => {
+            if (fileTreeLoaded) {
+              openFile(filePath);
+            } else {
+              setTimeout(waitForTree, 100);
+            }
+          };
+          waitForTree();
+        }
+      }
+    }
+
+    // Handle deep links after authentication completes.
+    // MutationObserver watches for the auth overlay being hidden.
+    const deepLinkObserver = new MutationObserver(() => {
+      if (document.getElementById('authOverlay').style.display === 'none') {
+        deepLinkObserver.disconnect();
+        handleDeepLink();
+      }
+    });
+    deepLinkObserver.observe(document.getElementById('authOverlay'), {
+      attributes: true, attributeFilter: ['style'],
+    });
   </script>
 </body>
 </html>