feat: file viewer

static/app.css

@@ -357,3 +357,65 @@
     transition: width 0.2s;
   }
   .total-label { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
+
+  /* Preview modal */
+  .preview-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .preview-modal[hidden] { display: none; }
+  .preview-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(2px);
+  }
+  .preview-panel {
+    position: relative;
+    width: min(1100px, 92vw);
+    height: min(820px, 88vh);
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .preview-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border);
+    background: var(--panel-2);
+  }
+  .preview-title {
+    flex: 1;
+    min-width: 0;
+    color: var(--text);
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .preview-actions { display: flex; gap: 6px; flex-shrink: 0; }
+  .preview-body {
+    flex: 1;
+    min-height: 0;
+    background: var(--bg);
+    overflow: auto;
+  }
+  .preview-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--text-dim);
+    font-size: 14px;
+  }