@hienlh/ppm 0.9.67 → 0.9.69

package/src/providers/claude-agent-sdk.ts

@@ -710,16 +710,17 @@ export class ClaudeAgentSdkProvider implements AIProvider {
       crashRetryLoop: for (;;) {
       try {
       // Streaming input: create message channel and persistent query
-      const { generator: streamGen, controller: streamCtrl } = createMessageChannel();
       const firstMsg = {
         type: 'user' as const,
         message: buildMessageParam(message),
         parent_tool_use_id: null,
         session_id: sessionId,
       };
-      streamCtrl.push(firstMsg);
 
-      const q = query({
+      const { generator: streamGen, controller: initialCtrl } = createMessageChannel();
+      initialCtrl.push(firstMsg);
+
+      const initialQuery = query({
         prompt: streamGen,
         options: {
           ...queryOptions,
@@ -727,9 +728,19 @@ export class ClaudeAgentSdkProvider implements AIProvider {
           canUseTool,
         } as any,
       });
-      this.streamingSessions.set(sessionId, { meta, query: q, controller: streamCtrl });
-      this.activeQueries.set(sessionId, q);
-      let eventSource: AsyncIterable<any> = q;
+      this.streamingSessions.set(sessionId, { meta, query: initialQuery, controller: initialCtrl });
+      this.activeQueries.set(sessionId, initialQuery);
+      let eventSource: AsyncIterable<any> = initialQuery;
+
+      // Helper: close the CURRENT streaming session (not stale closure refs).
+      // All retry paths must use this instead of closing captured variables directly.
+      const closeCurrentStream = () => {
+        const ss = this.streamingSessions.get(sessionId);
+        if (ss) {
+          ss.controller.done();
+          ss.query.close();
+        }
+      };
 
       let lastPartialText = "";
       /** Number of tool_use blocks pending results (top-level tools only, not subagent children) */
@@ -759,9 +770,8 @@ export class ClaudeAgentSdkProvider implements AIProvider {
           if ((msg as any).type === "result" && (msg as any).subtype === "error_during_execution" && ((msg as any).num_turns ?? 0) === 0 && retryCount < MAX_RETRIES) {
             retryCount++;
             console.warn(`[sdk] transient error on first event — retrying (attempt ${retryCount}/${MAX_RETRIES})`);
-            // Close failed query and old channel, create new channel + query for retry
-            streamCtrl.done();
-            q.close();
+            // Close current streaming session (uses streamingSessions, not stale closure refs)
+            closeCurrentStream();
             const { generator: retryGen, controller: retryCtrl } = createMessageChannel();
             retryCtrl.push(firstMsg);
             const retryOpts = { ...queryOptions, sessionId: undefined, resume: undefined };
@@ -809,9 +819,13 @@ export class ClaudeAgentSdkProvider implements AIProvider {
               } else {
                 console.log(`[sdk] session=${sessionId} ignoring retry init sdk_id=${initMsg.session_id} (mapping already set)`);
               }
-              const oldMeta = this.activeSessions.get(sessionId);
-              if (oldMeta) {
-                this.activeSessions.set(initMsg.session_id, { ...oldMeta, id: initMsg.session_id });
+              // Only create activeSessions alias for first-time SDK id mapping.
+              // Retry init events create phantom entries that pollute the map.
+              if (isFirstMessage) {
+                const oldMeta = this.activeSessions.get(sessionId);
+                if (oldMeta) {
+                  this.activeSessions.set(initMsg.session_id, { ...oldMeta, id: initMsg.session_id });
+                }
               }
             }
           }
@@ -849,8 +863,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
                 console.log(`[sdk] session=${sessionId} intercepted api_retry 401 — refreshing token for ${account.id} (${label})`);
                 yield { type: "account_retry" as const, reason: "Token refreshed", accountId: refreshedAccount.id, accountLabel: label };
                 const retryEnv = this.buildQueryEnv(meta.projectPath, refreshedAccount);
-                streamCtrl.done();
-                q.close();
+                closeCurrentStream();
                 const { generator: earlyAuthGen, controller: earlyAuthCtrl } = createMessageChannel();
                 const currentSdkId = getSessionMapping(sessionId);
                 const canResume = !!currentSdkId;
@@ -877,8 +890,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
                 console.log(`[sdk] session=${sessionId} refresh failed — switching to ${nextAcc.id} (${label})`);
                 yield { type: "account_retry" as const, reason: "Switching account", accountId: nextAcc.id, accountLabel: label };
                 const switchEnv = this.buildQueryEnv(meta.projectPath, nextAcc);
-                streamCtrl.done();
-                q.close();
+                closeCurrentStream();
                 const { generator: switchGen, controller: switchCtrl } = createMessageChannel();
                 const currentSdkId = getSessionMapping(sessionId);
                 const canResume = !!currentSdkId;
@@ -1030,8 +1042,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
                   // Re-resolve sdkId: the init event may have mapped ppmId → real SDK session_id
                   // after sdkId was originally resolved. Using the stale value would try to
                   // resume a non-existent session, causing the SDK to hang forever.
-                  streamCtrl.done();
-                  q.close();
+                  closeCurrentStream();
                   const { generator: authRetryGen, controller: authRetryCtrl } = createMessageChannel();
                   const currentSdkId = getSessionMapping(sessionId);
                   const canResume = !!currentSdkId;
@@ -1082,10 +1093,9 @@ export class ClaudeAgentSdkProvider implements AIProvider {
               }
               yield { type: "error", message: `Rate limited. Auto-retrying in ${backoff / 1000}s... (${rateLimitRetryCount}/${MAX_RATE_LIMIT_RETRIES})` };
               await new Promise((r) => setTimeout(r, backoff));
-              // Close failed query and recreate with (potentially new) account env.
+              // Close current streaming session and recreate with (potentially new) account env.
               // Re-resolve sdkId to pick up init-event mapping (see auth retry comment).
-              streamCtrl.done();
-              q.close();
+              closeCurrentStream();
               const rlRetryEnv = this.buildQueryEnv(meta.projectPath, account);
               const { generator: rlRetryGen, controller: rlRetryCtrl } = createMessageChannel();
               const rlCurrentSdkId = getSessionMapping(sessionId);
@@ -1183,8 +1193,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
                 yield { type: "error", message: `Rate limited. Auto-retrying in ${backoff / 1000}s... (${rateLimitRetryCount}/${MAX_RATE_LIMIT_RETRIES})` };
                 await new Promise((r) => setTimeout(r, backoff));
                 // Re-resolve sdkId to pick up init-event mapping (see auth retry comment).
-                streamCtrl.done();
-                q.close();
+                closeCurrentStream();
                 const rlRetryEnv = this.buildQueryEnv(meta.projectPath, account);
                 const { generator: rlRetryGen, controller: rlRetryCtrl } = createMessageChannel();
                 const rlCurrentSdkId2 = getSessionMapping(sessionId);
@@ -1216,8 +1225,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
                     console.log(`[sdk] 401 in result on account ${account.id} (${label}) — token refreshed, retrying`);
                     yield { type: "account_retry" as const, reason: "Token refreshed", accountId: refreshedAccount.id, accountLabel: label };
                     // Re-resolve sdkId to pick up init-event mapping (see auth retry comment).
-                    streamCtrl.done();
-                    q.close();
+                    closeCurrentStream();
                     const retryEnv = this.buildQueryEnv(meta.projectPath, refreshedAccount);
                     const { generator: authRetryGen2, controller: authRetryCtrl2 } = createMessageChannel();
                     const authCurrentSdkId2 = getSessionMapping(sessionId);

package/src/services/account.service.ts

@@ -125,7 +125,9 @@ class AccountService {
 
   /**
    * Ensure the access token for an OAuth account is still fresh.
-   * If it's expired or about to expire (within 60s), refresh it proactively.
+   * If it's expired or about to expire (within 1 hour), refresh it proactively.
+   * The generous buffer prevents 401 errors mid-conversation — the SDK subprocess
+   * may run for a long time before the token is actually sent to the API.
    * Returns the refreshed account with fresh tokens, or null if refresh failed.
    */
   async ensureFreshToken(id: string): Promise<AccountWithTokens | null> {
@@ -135,9 +137,10 @@ class AccountService {
     if (!acc.accessToken.startsWith("sk-ant-oat")) return acc;
     if (!acc.expiresAt) return acc;
     const nowS = Math.floor(Date.now() / 1000);
-    if (acc.expiresAt - nowS > 60) return acc; // still fresh
+    const REFRESH_BUFFER_S = 3600; // 1 hour — refresh proactively before expiry
+    if (acc.expiresAt - nowS > REFRESH_BUFFER_S) return acc; // still fresh
     try {
-      console.log(`[accounts] Pre-flight refresh for ${acc.email ?? id} (expires in ${acc.expiresAt - nowS}s)`);
+      console.log(`[accounts] Pre-flight refresh for ${acc.email ?? id} (expires in ${acc.expiresAt - nowS}s, buffer=${REFRESH_BUFFER_S}s)`);
       await this.refreshAccessToken(id, false);
       return this.getWithTokens(id);
     } catch (e) {

package/src/services/cloud-ws.service.ts

@@ -99,6 +99,7 @@ export function connect(opts: {
 
 export function disconnect(): void {
   shouldConnect = false;
+  reconnecting = false; // prevent stale flag from blocking future doConnect()
   if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
   if (heartbeatTimer) { clearInterval(heartbeatTimer); heartbeatTimer = null; }
   if (ws) {
@@ -122,8 +123,12 @@ export function onCommand(handler: CommandHandler): void {
   commandHandler = handler;
 }
 
+/** Returns true if WS is authenticated and ready, or still in auth handshake */
 export function isConnected(): boolean {
-  return connected;
+  // Also treat "connecting/open but auth pending" as connected to prevent
+  // external monitors from killing a valid WS during the 500ms auth delay.
+  if (connected) return true;
+  return ws !== null && ws.readyState <= WebSocket.OPEN;
 }
 
 // ─── Internal ───────────────────────────────────────

package/src/web/components/database/connection-list.tsx

@@ -88,6 +88,21 @@ export function ConnectionList({
     return a.localeCompare(b);
   });
 
+  // Pre-compute schemas for all connections (hooks can't be inside .map())
+  const schemasPerConn = useMemo(() => {
+    const result = new Map<number, Map<string, CachedTable[]>>();
+    for (const conn of connections) {
+      const tables = cachedTables.get(conn.id) ?? [];
+      const map = new Map<string, CachedTable[]>();
+      for (const t of tables) {
+        const key = t.schemaName;
+        (map.get(key) ?? map.set(key, []).get(key)!).push(t);
+      }
+      result.set(conn.id, map);
+    }
+    return result;
+  }, [connections, cachedTables]);
+
   if (connections.length === 0) {
     return (
       <p className="px-4 py-6 text-xs text-text-subtle text-center">
@@ -123,16 +138,7 @@ export function ConnectionList({
                   const tables = cachedTables.get(conn.id) ?? [];
                   const isRefreshing = refreshingIds.has(conn.id);
 
-                  // Group tables by schema for postgres
-                  const schemas = useMemo(() => {
-                    const map = new Map<string, CachedTable[]>();
-                    for (const t of tables) {
-                      const key = t.schemaName;
-                      (map.get(key) ?? map.set(key, []).get(key)!).push(t);
-                    }
-                    return map;
-                  }, [tables]);
-
+                  const schemas = schemasPerConn.get(conn.id) ?? new Map();
                   const isSingleSchema = schemas.size <= 1;
                   const filter = tableFilter.get(conn.id) ?? "";
 

package/src/web/components/database/data-grid.tsx

@@ -21,6 +21,8 @@ interface DataGridProps {
   selectedTable?: string | null;
   selectedSchema?: string;
   connectionName?: string;
+  /** Controlled column ILIKE filters — parent owns state */
+  columnFilters?: Record<string, string>;
   /** Called when column ILIKE filters change — parent builds WHERE clause */
   onColumnFilter?: (filters: Record<string, string>) => void;
 }
@@ -29,7 +31,7 @@ export function DataGrid({
   tableData, schema, loading, page, onPageChange, onCellUpdate, onRowDelete,
   orderBy, orderDir, onToggleSort,
   onBulkDelete, onInsertRow,
-  connectionId, selectedTable, selectedSchema, connectionName, onColumnFilter,
+  connectionId, selectedTable, selectedSchema, connectionName, columnFilters: colFilters = {}, onColumnFilter,
 }: DataGridProps) {
   const [editingCell, setEditingCell] = useState<{ rowIdx: number; col: string } | null>(null);
   const [editValue, setEditValue] = useState("");
@@ -52,7 +54,6 @@ export function DataGrid({
   }, [openTab]);
   const [pinnedCols, setPinnedCols] = useState<Set<string>>(new Set());
   const [pinnedRows, setPinnedRows] = useState<Set<number>>(new Set());
-  const [colFilters, setColFilters] = useState<Record<string, string>>({});
   const [filterOpenCol, setFilterOpenCol] = useState<string | null>(null);
 
   const pkCol = useMemo(() => {
@@ -118,20 +119,9 @@ export function DataGrid({
   }, []);
 
   const updateColFilter = useCallback((col: string, val: string) => {
-    setColFilters((prev) => {
-      const next = { ...prev };
-      if (val) next[col] = val; else delete next[col];
-      return next;
-    });
-  }, []);
-
-  // Notify parent when column filters change
-  const colFiltersRef = useRef(colFilters);
-  useEffect(() => {
-    if (colFiltersRef.current !== colFilters) {
-      colFiltersRef.current = colFilters;
-      onColumnFilter?.(colFilters);
-    }
+    const next = { ...colFilters };
+    if (val) next[col] = val; else delete next[col];
+    onColumnFilter?.(next);
   }, [colFilters, onColumnFilter]);
 
   const toggleRowSelection = useCallback((idx: number) => {
@@ -219,24 +209,13 @@ export function DataGrid({
     return () => el.removeEventListener("keydown", handler);
   }, [tableData, selectedRows]);
 
-  if (!tableData) {
-    return (
-      <div className="flex items-center justify-center h-full text-xs text-muted-foreground">
-        {loading ? <Loader2 className="size-4 animate-spin" /> : "Select a table"}
-      </div>
-    );
-  }
-
-  const totalPages = Math.ceil(tableData.total / tableData.limit) || 1;
-  const hasSelection = selectedRows.size > 0;
-  const allSelected = selectedRows.size === tableData.rows.length && tableData.rows.length > 0;
-
   // Build ordered column list: pinned first, then unpinned
   const orderedCols = useMemo(() => {
+    if (!tableData) return [];
     const pinned = tableData.columns.filter((c) => pinnedCols.has(c));
     const unpinned = tableData.columns.filter((c) => !pinnedCols.has(c));
     return [...pinned, ...unpinned];
-  }, [tableData.columns, pinnedCols]);
+  }, [tableData?.columns, pinnedCols]);
 
   // Measure actual column widths and header height from DOM
   const theadRef = useRef<HTMLTableSectionElement>(null);
@@ -248,12 +227,10 @@ export function DataGrid({
     if (!thead) return;
     const measure = () => {
       setHeaderHeight(thead.offsetHeight);
-      // Measure each <th> by data-col attribute
       const widths = new Map<string, number>();
       thead.querySelectorAll<HTMLElement>("th[data-col]").forEach((th) => {
         widths.set(th.dataset.col!, th.offsetWidth);
       });
-      // Also measure checkbox th
       const cbTh = thead.querySelector<HTMLElement>("th[data-col='_cb']");
       if (cbTh) widths.set("_cb", cbTh.offsetWidth);
       setColWidths(widths);
@@ -262,7 +239,7 @@ export function DataGrid({
     const obs = new ResizeObserver(measure);
     obs.observe(thead);
     return () => obs.disconnect();
-  }, [tableData?.columns, pinnedCols]); // re-measure when columns or pins change
+  }, [tableData?.columns, pinnedCols]);
 
   // Compute sticky left offsets from measured widths
   const pinnedColOffsets = useMemo(() => {
@@ -290,13 +267,11 @@ export function DataGrid({
     else pinnedRowRefs.current.delete(idx);
   }, []);
 
-  // Measure pinned rows after render
   useEffect(() => {
     if (pinnedRowData.length === 0) {
       if (pinnedRowHeights.size > 0) setPinnedRowHeights(new Map());
       return;
     }
-    // Use rAF to measure after browser layout
     const id = requestAnimationFrame(() => {
       const heights = new Map<number, number>();
       for (const { idx } of pinnedRowData) {
@@ -308,17 +283,28 @@ export function DataGrid({
     return () => cancelAnimationFrame(id);
   }, [pinnedRowData, tableData]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Compute cumulative sticky top for each pinned row
   const pinnedRowTops = useMemo(() => {
     const tops = new Map<number, number>();
     let cumTop = headerHeight;
     for (const { idx } of pinnedRowData) {
       tops.set(idx, cumTop);
-      cumTop += pinnedRowHeights.get(idx) ?? 28; // fallback 28 for first render
+      cumTop += pinnedRowHeights.get(idx) ?? 28;
     }
     return tops;
   }, [headerHeight, pinnedRowData, pinnedRowHeights]);
 
+  if (!tableData) {
+    return (
+      <div className="flex items-center justify-center h-full text-xs text-muted-foreground">
+        {loading ? <Loader2 className="size-4 animate-spin" /> : "Select a table"}
+      </div>
+    );
+  }
+
+  const totalPages = Math.ceil(tableData.total / tableData.limit) || 1;
+  const hasSelection = selectedRows.size > 0;
+  const allSelected = selectedRows.size === tableData.rows.length && tableData.rows.length > 0;
+
   return (
     <div ref={containerRef} tabIndex={0} className="flex flex-col h-full overflow-hidden outline-none">
       {/* Search + bulk actions toolbar */}
@@ -391,7 +377,12 @@ export function DataGrid({
       )}
 
       {/* Table */}
-      <div className="flex-1 overflow-auto">
+      <div className="flex-1 overflow-auto relative">
+        {loading && (
+          <div className="absolute inset-0 z-30 flex items-center justify-center bg-background/60">
+            <Loader2 className="size-5 animate-spin text-primary" />
+          </div>
+        )}
         <table className="w-full text-xs" style={{ borderCollapse: "separate", borderSpacing: 0 }}>
           <thead ref={theadRef} className="sticky top-0 z-20 bg-muted">
             <tr>

package/src/web/components/database/database-viewer.tsx

@@ -7,6 +7,17 @@ import { ExportButton } from "./export-button";
 import { DataGrid } from "./data-grid";
 import type { SchemaInfo } from "./sql-completion-provider";
 
+/** Parse WHERE "col" ILIKE '%val%' clauses from SQL */
+function parseSqlFilters(sql: string): Record<string, string> {
+  const filters: Record<string, string> = {};
+  const re = /"(\w+)"\s+ILIKE\s+'%([^']*?)%'/gi;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(sql)) !== null) {
+    filters[m[1]!] = m[2]!.replace(/''/g, "'");
+  }
+  return filters;
+}
+
 interface Props { metadata?: Record<string, unknown>; tabId?: string }
 
 /** Generic database viewer — works for any DB type via unified API */
@@ -52,9 +63,8 @@ export function DatabaseViewer({ metadata }: Props) {
     if (!db.selectedTable || Object.keys(columnFilters).length === 0) return;
     clearTimeout(filterTimerRef.current);
     filterTimerRef.current = setTimeout(() => {
-      // Execute the current defaultQuery which already includes filters
-      db.executeQuery(defaultQuery);
-      setShowingQueryResult(true);
+      // Execute filter query into tableData — stays in table grid mode
+      db.queryAsTable(defaultQuery);
     }, 500);
     return () => clearTimeout(filterTimerRef.current);
   }, [columnFilters]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -110,9 +120,21 @@ export function DatabaseViewer({ metadata }: Props) {
   // Track whether user ran a custom query (show results instead of table grid)
   const [showingQueryResult, setShowingQueryResult] = useState(!!initialSql);
   const handleExecuteQuery = useCallback((sql: string) => {
+    const trimmed = sql.trim();
+    // Check if query is a simple SELECT on the current table — stay in table grid mode
+    if (db.selectedTable) {
+      const tablePattern = new RegExp(`^SELECT\\s+\\*\\s+FROM\\s+"?${db.selectedTable.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}"?\\b`, "i");
+      if (tablePattern.test(trimmed)) {
+        // Parse ILIKE filters from SQL and sync to columnFilters
+        const parsed = parseSqlFilters(trimmed);
+        setColumnFilters(parsed);
+        db.queryAsTable(trimmed);
+        return;
+      }
+    }
     setShowingQueryResult(true);
     db.executeQuery(sql);
-  }, [db.executeQuery]);
+  }, [db.executeQuery, db.queryAsTable, db.selectedTable]);
 
   // When user interacts with DataGrid (sort/page), switch back to table view
   const handleToggleSort = useCallback((col: string) => {
@@ -173,7 +195,7 @@ export function DatabaseViewer({ metadata }: Props) {
               orderBy={db.orderBy} orderDir={db.orderDir} onToggleSort={handleToggleSort}
               onBulkDelete={db.bulkDelete} onInsertRow={db.insertRow}
               connectionId={connectionId} selectedTable={db.selectedTable} selectedSchema={db.selectedSchema}
-              connectionName={connectionName} onColumnFilter={handleColumnFilter} />
+              connectionName={connectionName} columnFilters={columnFilters} onColumnFilter={handleColumnFilter} />
           )}
 
           {showQueryResults && (

package/src/web/components/database/use-database.ts

@@ -173,12 +173,27 @@ export function useDatabase(connectionId: number) {
     }
   }, [base, selectedTable, selectedSchema, fetchTableData]);
 
+  /** Execute SQL but put results into tableData (for column filters) */
+  const queryAsTable = useCallback(async (sqlText: string) => {
+    setLoading(true);
+    try {
+      const result = await api.post<DbQueryResult>(`${base}/query`, { sql: sqlText });
+      if (result.changeType === "select") {
+        setTableData({ columns: result.columns, rows: result.rows, total: result.rows.length, page: 1, limit: result.rows.length });
+      }
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }, [base]);
+
   return {
     selectedTable, selectedSchema, selectTable, tableData, schema,
     loading, error, page, setPage: changePage,
     orderBy, orderDir, toggleSort,
     queryResult, queryError, queryLoading, executeQuery,
     updateCell, deleteRow, bulkDelete, insertRow,
-    refreshData: fetchTableData,
+    refreshData: fetchTableData, queryAsTable,
   };
 }

package/src/web/components/editor/code-editor.tsx

@@ -86,6 +86,36 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
 
   const selectedSqlConn = useMemo(() => connections.find((c) => c.id === sqlConnId) ?? null, [connections, sqlConnId]);
 
+  // Beautify for inline content (must be before early returns to maintain hook order)
+  const canBeautifyInline = inlineContent != null && (inlineLanguage === "json" || inlineLanguage === "xml");
+  const [isBeautified, setIsBeautified] = useState(false);
+  const handleBeautifyInline = useCallback(() => {
+    if (!inlineContent) return;
+    if (isBeautified) {
+      setContent(inlineContent);
+      setIsBeautified(false);
+    } else {
+      const trimmed = inlineContent.trimStart();
+      if (inlineLanguage === "json") {
+        try { setContent(JSON.stringify(JSON.parse(trimmed), null, 2)); setIsBeautified(true); } catch { /* not valid */ }
+      } else if (inlineLanguage === "xml") {
+        let indent = 0;
+        const formatted = trimmed.replace(/(>)(<)(\/*)/g, "$1\n$2$3")
+          .split("\n")
+          .map((line) => {
+            const l = line.trim();
+            if (l.startsWith("</")) indent = Math.max(0, indent - 1);
+            const padded = "  ".repeat(indent) + l;
+            if (l.startsWith("<") && !l.startsWith("</") && !l.endsWith("/>") && !l.includes("</")) indent++;
+            return padded;
+          })
+          .join("\n");
+        setContent(formatted);
+        setIsBeautified(true);
+      }
+    }
+  }, [inlineContent, inlineLanguage, isBeautified]);
+
   // Persist selected connection per file
   const handleSqlConnChange = useCallback((connId: number) => {
     setSqlConnId(connId);
@@ -362,36 +392,6 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
     </div>
   ) : null;
 
-  // Beautify for inline content
-  const canBeautifyInline = inlineContent != null && (inlineLanguage === "json" || inlineLanguage === "xml");
-  const [isBeautified, setIsBeautified] = useState(false);
-  const handleBeautifyInline = useCallback(() => {
-    if (!inlineContent) return;
-    if (isBeautified) {
-      setContent(inlineContent);
-      setIsBeautified(false);
-    } else {
-      const trimmed = inlineContent.trimStart();
-      if (inlineLanguage === "json") {
-        try { setContent(JSON.stringify(JSON.parse(trimmed), null, 2)); setIsBeautified(true); } catch { /* not valid */ }
-      } else if (inlineLanguage === "xml") {
-        let indent = 0;
-        const formatted = trimmed.replace(/(>)(<)(\/*)/g, "$1\n$2$3")
-          .split("\n")
-          .map((line) => {
-            const l = line.trim();
-            if (l.startsWith("</")) indent = Math.max(0, indent - 1);
-            const padded = "  ".repeat(indent) + l;
-            if (l.startsWith("<") && !l.startsWith("</") && !l.endsWith("/>") && !l.includes("</")) indent++;
-            return padded;
-          })
-          .join("\n");
-        setContent(formatted);
-        setIsBeautified(true);
-      }
-    }
-  }, [inlineContent, inlineLanguage, isBeautified]);
-
   return (
     <div className="flex flex-col h-full w-full overflow-hidden">
       {/* Inline content toolbar (cell viewer mode) */}

package/dist/web/assets/code-editor-BixOXePn.js

@@ -1,8 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/csv-preview-D2pJJj3K.js","assets/chunk-CFjPhJqf.js","assets/lib-DurwGtQO.js","assets/react-nm2Ru1Pt.js","assets/createLucideIcon-PuMiQgHl.js","assets/arrow-up-BYhx9ckd.js","assets/react-dom-Bpkvzu3U.js","assets/jsx-runtime-kMwlnEGE.js","assets/csv-parser-CNNw2RVA.js"])))=>i.map(i=>d[i]);
-import{o as e}from"./chunk-CFjPhJqf.js";import{t}from"./react-nm2Ru1Pt.js";import"./react-dom-Bpkvzu3U.js";import{t as n}from"./createLucideIcon-PuMiQgHl.js";import{t as r}from"./chevron-right-4zq1jPv6.js";import{n as i,t as a}from"./markdown-renderer-BUqab2os.js";import{t as o}from"./table-DFevCOMd.js";import{t as s}from"./text-wrap-BWNOVswA.js";import{t as c}from"./preload-helper-Bf_JiD2A.js";import{t as l}from"./jsx-runtime-kMwlnEGE.js";import"./dist-DIV6WgAG.js";import{t as u}from"./utils-BNytJOb1.js";import{i as d,r as f,t as p}from"./api-client-BfBM3I7n.js";import{Ct as m,Et as ee,K as h,R as g,S as _,St as v,Tt as y,Y as te,_ as b,_t as x,a as ne,at as re,b as S,bt as C,g as w,pt as T,v as E,vt as D,w as ie,wt as O,x as k,xt as A,y as j,yt as M}from"./index-DwrCg0TN.js";import"./chunk-GEFDOKGD-D-pKjlVd.js";import"./src-BqX54PbV.js";import"./chunk-7R4GIKGN-Dv-4cAYn.js";import"./chunk-HHEYEP7N-C7vxA5i9.js";import"./dist-CSJdAyA9.js";import"./chunk-PU5JKC2W-ek7k4QVB.js";import"./chunk-MX3YWQON-BpS_PtKp.js";import"./chunk-YBOYWFTD-rQG3QH5s.js";import"./chunk-PQ6SQG4A-TF58UVMU.js";import"./chunk-KYZI473N-Bb0MCaIO.js";import"./chunk-O4XLMI2P-nDhi_cVu.js";import"./chunk-GLR3WWYH-DKikpoJM.js";import"./chunk-XPW4576I-BPQQBakK.js";import{n as ae,t as oe}from"./use-monaco-theme-U9ZhfvHB.js";import{n as se,t as ce}from"./sql-completion-provider-DM9Qov6L.js";var N=n(`file-exclamation-point`,[[`path`,{d:`M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z`,key:`1oefj6`}],[`path`,{d:`M12 9v4`,key:`juzpu7`}],[`path`,{d:`M12 17h.01`,key:`p32p05`}]]),P=e(t(),1),F=l(),le={ts:A,tsx:A,js:A,jsx:A,py:A,rs:A,go:A,html:A,css:A,scss:A,json:v,md:C,txt:C,yaml:M,yml:M};function ue(e,t){return t?x:le[e.split(`.`).pop()?.toLowerCase()??``]??D}function I(e,t){let n=[],r=e;for(let e=0;e<t.length;e++){let i=t[e],a=t.slice(0,e+1).join(`/`),o=r.find(e=>e.name===i);if(n.push({name:i,fullPath:a,node:o??null,siblings:r}),o?.children)r=o.children;else{for(let r=e+1;r<t.length;r++)n.push({name:t[r],fullPath:t.slice(0,r+1).join(`/`),node:null,siblings:[]});break}}return n}function L(e){return[...e].sort((e,t)=>e.type===t.type?e.name.localeCompare(t.name):e.type===`directory`?-1:1)}function de({filePath:e,projectName:t,tabId:n,className:i}){let a=g(e=>e.tree),{updateTab:o,openTab:s}=h(),c=(0,P.useRef)(null),l=(0,P.useMemo)(()=>I(a,e.split(`/`).filter(Boolean)),[a,e]);(0,P.useEffect)(()=>{c.current&&(c.current.scrollLeft=c.current.scrollWidth)},[l]);function d(e,r){let i=u(e);r.metaKey||r.ctrlKey?s({type:`editor`,title:i,metadata:{filePath:e,projectName:t},projectId:t,closable:!0}):o(n,{title:i,metadata:{filePath:e,projectName:t}})}return(0,F.jsx)(`div`,{ref:c,className:i,children:l.map((e,n)=>(0,F.jsxs)(`div`,{className:`flex items-center shrink-0`,children:[n>0&&(0,F.jsx)(r,{className:`size-3 text-muted-foreground shrink-0 mx-0.5`}),e.siblings.length>0?(0,F.jsx)(fe,{segment:e,isLast:n===l.length-1,projectName:t,onFileClick:d}):(0,F.jsx)(`span`,{className:`text-xs text-muted-foreground px-1 py-0.5`,children:e.name})]},e.fullPath))})}function fe({segment:e,isLast:t,projectName:n,onFileClick:r}){let i=(0,P.useMemo)(()=>L(e.siblings),[e.siblings]);return(0,F.jsxs)(w,{children:[(0,F.jsx)(_,{asChild:!0,children:(0,F.jsx)(`button`,{type:`button`,className:`text-xs px-1 py-0.5 rounded hover:bg-muted transition-colors truncate max-w-[120px] ${t?`text-foreground font-medium`:`text-muted-foreground`}`,children:e.name})}),(0,F.jsx)(b,{align:`start`,className:`max-h-[300px] p-1`,children:i.map(t=>(0,F.jsx)(R,{node:t,projectName:n,activePath:e.fullPath,onFileClick:r},t.path))})]})}function R({node:e,projectName:t,activePath:n,onFileClick:r}){let i=ue(e.name,e.type===`directory`),a=e.path===n;return e.type===`directory`&&e.children&&e.children.length>0?(0,F.jsxs)(j,{children:[(0,F.jsxs)(k,{className:`text-xs gap-1.5 ${a?`bg-muted`:``}`,children:[(0,F.jsx)(i,{className:`size-3.5 shrink-0 text-muted-foreground`}),(0,F.jsx)(`span`,{className:`truncate`,children:e.name})]}),(0,F.jsx)(S,{className:`max-h-[300px] overflow-y-auto p-1`,children:L(e.children).map(e=>(0,F.jsx)(R,{node:e,projectName:t,activePath:n,onFileClick:r},e.path))})]}):(0,F.jsxs)(E,{className:`text-xs gap-1.5 cursor-pointer ${a?`bg-muted`:``}`,onSelect:e=>{},onClick:t=>{e.type!==`directory`&&r(e.path,t)},children:[(0,F.jsx)(i,{className:`size-3.5 shrink-0 text-muted-foreground`}),(0,F.jsx)(`span`,{className:`truncate`,children:e.name})]})}function z({active:e,onClick:t,icon:n,label:r}){return(0,F.jsxs)(`button`,{type:`button`,onClick:t,className:`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${e?`bg-muted text-foreground`:`text-muted-foreground hover:text-foreground`}`,children:[(0,F.jsx)(n,{className:`size-3`}),(0,F.jsx)(`span`,{className:`hidden sm:inline`,children:r})]})}function pe({ext:e,mdMode:t,onMdModeChange:n,csvMode:r,onCsvModeChange:a,wordWrap:c,onToggleWordWrap:l,filePath:u,projectName:d,className:f}){return(0,F.jsxs)(`div`,{className:f,children:[(e===`md`||e===`mdx`)&&n&&(0,F.jsxs)(F.Fragment,{children:[(0,F.jsx)(z,{active:t===`edit`,onClick:()=>n(`edit`),icon:i,label:`Edit`}),(0,F.jsx)(z,{active:t===`preview`,onClick:()=>n(`preview`),icon:m,label:`Preview`})]}),e===`csv`&&a&&(0,F.jsxs)(F.Fragment,{children:[(0,F.jsx)(z,{active:r===`table`,onClick:()=>a(`table`),icon:o,label:`Table`}),(0,F.jsx)(z,{active:r===`raw`,onClick:()=>a(`raw`),icon:i,label:`Raw`})]}),(0,F.jsx)(z,{active:c,onClick:l,icon:s,label:`Wrap`}),u&&d&&(0,F.jsx)(z,{active:!1,onClick:()=>ie(d,u),icon:y,label:`Download`})]})}var me=(0,P.lazy)(()=>c(()=>import(`./csv-preview-D2pJJj3K.js`).then(e=>({default:e.CsvPreview})),__vite__mapDeps([0,1,2,3,4,5,6,7,8]))),he=new Set([`png`,`jpg`,`jpeg`,`gif`,`webp`,`svg`,`ico`]),ge=new Set([`db`,`sqlite`,`sqlite3`]);function B(e){return e.split(`.`).pop()?.toLowerCase()??``}function _e(e){return{js:`javascript`,jsx:`javascript`,ts:`typescript`,tsx:`typescript`,py:`python`,html:`html`,css:`css`,scss:`scss`,json:`json`,md:`markdown`,mdx:`markdown`,yaml:`yaml`,yml:`yaml`,sh:`shell`,bash:`shell`,sql:`sql`}[B(e)]??`plaintext`}function V({metadata:e,tabId:t}){let n=e?.filePath,r=e?.projectName,i=e?.inlineContent,a=e?.inlineLanguage,[o,s]=(0,P.useState)(i??null),[c,l]=(0,P.useState)(`utf-8`),[f,m]=(0,P.useState)(!0),[g,_]=(0,P.useState)(null),[v,y]=(0,P.useState)(!1),b=(0,P.useRef)(null),x=(0,P.useRef)(``),S=(0,P.useRef)(null),{tabs:C,updateTab:w}=h(),{wordWrap:E,toggleWordWrap:D}=te(),ie=oe(),O=C.find(e=>e.id===t),k=n?B(n):``,A=he.has(k),j=k===`pdf`,M=ge.has(k),le=k===`md`||k===`mdx`,ue=k===`csv`,I=k===`sql`,[L,fe]=(0,P.useState)(`preview`),[R,z]=(0,P.useState)(`table`),{connections:V,cachedTables:xe,refreshTables:Se}=ne(),[H,Ce]=(0,P.useState)(()=>{if(!I||!n)return null;let e=localStorage.getItem(`ppm:sql-conn:${n}`);return e?Number(e):null}),U=(0,P.useRef)(null),W=(0,P.useRef)(null),G=(0,P.useMemo)(()=>V.find(e=>e.id===H)??null,[V,H]),we=(0,P.useCallback)(e=>{Ce(e),n&&localStorage.setItem(`ppm:sql-conn:${n}`,String(e)),Se(e).catch(()=>{})},[n,Se]),K=(0,P.useMemo)(()=>{if(!I||!H)return;let e=(xe.get(H)??[]).map(e=>({name:e.tableName,schema:e.schemaName}));if(e.length!==0)return{tables:e,getColumns:async(e,t)=>p.get(`/api/db/connections/${H}/schema?table=${encodeURIComponent(e)}${t?`&schema=${encodeURIComponent(t)}`:``}`)}},[I,H,xe]);(0,P.useEffect)(()=>{if(!(!U.current||!K))return W.current?.dispose(),ce(),W.current=U.current.languages.registerCompletionItemProvider(`sql`,se(U.current,K)),()=>{W.current?.dispose()}},[K]);let Te=h(e=>e.openTab),q=(0,P.useCallback)(e=>{G&&Te({type:`database`,title:`${G.name} · Query`,projectId:null,closable:!0,metadata:{connectionId:G.id,connectionName:G.name,dbType:G.type,initialSql:e}})},[G,Te]),Ee=(0,P.useCallback)(()=>{if(!S.current||!G)return;let e=S.current,t=e.getSelection();q(t&&!t.isEmpty()?e.getModel()?.getValueInRange(t)??e.getValue():e.getValue())},[G,q]),J=(0,P.useRef)([]),Y=(0,P.useRef)(q);Y.current=q,(0,P.useEffect)(()=>{M&&t&&w(t,{type:`sqlite`})},[M,t,w]);let X=n?/^(\/|[A-Za-z]:[/\\])/.test(n):!1;(0,P.useEffect)(()=>{if(i!=null){m(!1);return}if(!n||!X&&!r)return;if(A||j){m(!1);return}m(!0),_(null);let e=X?`/api/fs/read?path=${encodeURIComponent(n)}`:`${d(r)}/files/read?path=${encodeURIComponent(n)}`;return p.get(e).then(e=>{s(e.content),e.encoding&&l(e.encoding),x.current=e.content,m(!1)}).catch(e=>{_(e instanceof Error?e.message:`Failed to load file`),m(!1)}),()=>{b.current&&clearTimeout(b.current)}},[n,r,A,j,X]),(0,P.useEffect)(()=>{if(!O)return;let e=n?u(n):`Untitled`,t=v?`${e} \u25CF`:e;O.title!==t&&w(O.id,{title:t})},[v]);let De=(0,P.useCallback)(async e=>{if(n&&!(!X&&!r))try{X?await p.put(`/api/fs/write`,{path:n,content:e}):await p.put(`${d(r)}/files/write`,{path:n,content:e}),y(!1)}catch{}},[n,r,X]);function Oe(e){let t=e??``;s(t),x.current=t,y(!0),b.current&&clearTimeout(b.current),b.current=setTimeout(()=>De(x.current),1e3)}let Z=e?.lineNumber,ke=(0,P.useCallback)((e,t)=>{if(S.current=e,U.current=t,Z&&Z>0&&setTimeout(()=>{e.revealLineInCenter(Z),e.setPosition({lineNumber:Z,column:1}),e.focus()},100),e.addCommand(t.KeyMod.Alt|t.KeyCode.KeyZ,()=>te.getState().toggleWordWrap()),t.languages.typescript.typescriptDefaults.setDiagnosticsOptions({noSemanticValidation:!0,noSyntaxValidation:!0,noSuggestionDiagnostics:!0}),t.languages.typescript.javascriptDefaults.setDiagnosticsOptions({noSemanticValidation:!0,noSyntaxValidation:!0,noSuggestionDiagnostics:!0}),K&&(W.current?.dispose(),W.current=t.languages.registerCompletionItemProvider(`sql`,se(t,K))),I){J.current.forEach(e=>e.dispose()),J.current=[];let n=e.addCommand(0,(e,t)=>{t&&Y.current(t)});if(n){let e=t.languages.registerCodeLensProvider(`sql`,{provideCodeLenses:e=>{let t=[],r=e.getValue().split(`
-`),i=-1,a=[],o=(e,r)=>{let i=r.trim();!i||i.startsWith(`--`)||t.push({range:{startLineNumber:e,startColumn:1,endLineNumber:e,endColumn:1},command:{id:n,title:`▷ Run`,arguments:[i]}})};for(let e=0;e<r.length;e++){let t=r[e].trim();if(i===-1){if(!t||t.startsWith(`--`))continue;i=e+1,a=[]}a.push(r[e]),t.endsWith(`;`)&&(o(i,a.join(`
-`)),i=-1,a=[])}return i>0&&a.join(``).trim()&&o(i,a.join(`
-`)),{lenses:t,dispose:()=>{}}}});J.current.push(e)}}},[K]);if(!i&&(!n||!X&&!r))return(0,F.jsx)(`div`,{className:`flex items-center justify-center h-full text-text-secondary text-sm`,children:`No file selected.`});if(f)return(0,F.jsxs)(`div`,{className:`flex items-center justify-center h-full gap-2 text-text-secondary`,children:[(0,F.jsx)(T,{className:`size-5 animate-spin`}),(0,F.jsx)(`span`,{className:`text-sm`,children:`Loading file...`})]});if(g)return(0,F.jsx)(`div`,{className:`flex items-center justify-center h-full text-error text-sm`,children:g});if(A)return(0,F.jsx)(ye,{filePath:n,projectName:r});if(j)return(0,F.jsx)(be,{filePath:n,projectName:r});if(c===`base64`)return(0,F.jsxs)(`div`,{className:`flex flex-col items-center justify-center h-full gap-3 text-text-secondary`,children:[(0,F.jsx)(N,{className:`size-10 text-text-subtle`}),(0,F.jsx)(`p`,{className:`text-sm`,children:`This file is a binary format and cannot be displayed.`}),(0,F.jsx)(`p`,{className:`text-xs text-text-subtle`,children:n})]});let Ae=I?(0,F.jsxs)(`div`,{className:`shrink-0 flex items-center gap-1 px-2 border-l border-border`,children:[(0,F.jsx)(ee,{className:`size-3 text-muted-foreground`}),(0,F.jsxs)(`select`,{value:H??``,onChange:e=>{let t=Number(e.target.value);t&&we(t)},className:`h-5 text-[10px] bg-transparent border border-border rounded px-1 text-foreground outline-none max-w-[140px]`,title:`Select connection for autocomplete`,children:[(0,F.jsx)(`option`,{value:``,children:`Connection…`}),V.map(e=>(0,F.jsx)(`option`,{value:e.id,children:e.name},e.id))]}),(0,F.jsx)(`button`,{type:`button`,onClick:Ee,disabled:!G,className:`p-0.5 rounded text-muted-foreground hover:text-primary disabled:opacity-30 transition-colors`,title:`Run all in DB Viewer`,children:(0,F.jsx)(re,{className:`size-3.5`})})]}):null,je=i!=null&&(a===`json`||a===`xml`),[Q,$]=(0,P.useState)(!1),Me=(0,P.useCallback)(()=>{if(i)if(Q)s(i),$(!1);else{let e=i.trimStart();if(a===`json`)try{s(JSON.stringify(JSON.parse(e),null,2)),$(!0)}catch{}else if(a===`xml`){let t=0;s(e.replace(/(>)(<)(\/*)/g,`$1
-$2$3`).split(`
-`).map(e=>{let n=e.trim();n.startsWith(`</`)&&(t=Math.max(0,t-1));let r=`  `.repeat(t)+n;return n.startsWith(`<`)&&!n.startsWith(`</`)&&!n.endsWith(`/>`)&&!n.includes(`</`)&&t++,r}).join(`
-`)),$(!0)}}},[i,a,Q]);return(0,F.jsxs)(`div`,{className:`flex flex-col h-full w-full overflow-hidden`,children:[i!=null&&je&&(0,F.jsx)(`div`,{className:`flex items-center h-7 border-b border-border bg-background shrink-0 px-2 gap-2`,children:(0,F.jsx)(`button`,{type:`button`,onClick:Me,className:`text-[10px] px-2 py-0.5 rounded border border-border hover:bg-muted transition-colors text-foreground`,children:Q?`Raw`:`Beautify`})}),n&&r&&t&&(0,F.jsxs)(`div`,{className:`hidden md:flex items-center h-7 border-b border-border bg-background shrink-0`,children:[(0,F.jsx)(de,{filePath:n,projectName:r,tabId:t,className:`flex items-center flex-1 min-w-0 overflow-x-auto scrollbar-none px-2 gap-0.5`}),Ae,(0,F.jsx)(pe,{ext:k,mdMode:L,onMdModeChange:fe,csvMode:R,onCsvModeChange:z,wordWrap:E,onToggleWordWrap:D,filePath:n,projectName:r,className:`shrink-0 flex items-center gap-1 px-2`})]}),I&&(!r||!t)&&(0,F.jsxs)(`div`,{className:`hidden md:flex items-center h-7 border-b border-border bg-background shrink-0 px-2`,children:[(0,F.jsx)(`span`,{className:`text-xs text-muted-foreground truncate flex-1`,children:n?u(n):`SQL`}),Ae]}),ue&&R===`table`?(0,F.jsx)(P.Suspense,{fallback:(0,F.jsx)(`div`,{className:`flex items-center justify-center h-full`,children:(0,F.jsx)(T,{className:`size-5 animate-spin text-text-subtle`})}),children:(0,F.jsx)(me,{content:o??``,onContentChange:Oe,wordWrap:E})}):le&&L===`preview`?(0,F.jsx)(ve,{content:o??``}):(0,F.jsx)(`div`,{className:`flex-1 overflow-hidden`,children:(0,F.jsx)(ae,{height:`100%`,language:a??_e(n??``),value:o??``,onChange:i==null?Oe:void 0,onMount:ke,theme:ie,options:{fontSize:13,fontFamily:`Menlo, Monaco, Consolas, monospace`,wordWrap:E?`on`:`off`,minimap:{enabled:!1},scrollBeyondLastLine:!1,automaticLayout:!0,lineNumbers:`on`,folding:!0,bracketPairColorization:{enabled:!0},readOnly:i!=null},loading:(0,F.jsx)(T,{className:`size-5 animate-spin text-text-subtle`})})})]})}function ve({content:e}){return(0,F.jsx)(a,{content:e,className:`flex-1 overflow-auto p-4`})}function ye({filePath:e,projectName:t}){let[n,r]=(0,P.useState)(null),[i,a]=(0,P.useState)(!1);return(0,P.useEffect)(()=>{let n,i=`${d(t)}/files/raw?path=${encodeURIComponent(e)}`,o=f();return fetch(i,{headers:o?{Authorization:`Bearer ${o}`}:{}}).then(e=>{if(!e.ok)throw Error(`Failed`);return e.blob()}).then(e=>{let t=URL.createObjectURL(e);n=t,r(t)}).catch(()=>a(!0)),()=>{n&&URL.revokeObjectURL(n)}},[e,t]),i?(0,F.jsxs)(`div`,{className:`flex flex-col items-center justify-center h-full gap-3 text-text-secondary`,children:[(0,F.jsx)(N,{className:`size-10 text-text-subtle`}),(0,F.jsx)(`p`,{className:`text-sm`,children:`Failed to load image.`})]}):n?(0,F.jsx)(`div`,{className:`flex items-center justify-center h-full p-4 bg-surface overflow-auto`,children:(0,F.jsx)(`img`,{src:n,alt:e,className:`max-w-full max-h-full object-contain`})}):(0,F.jsx)(`div`,{className:`flex items-center justify-center h-full`,children:(0,F.jsx)(T,{className:`size-5 animate-spin text-text-subtle`})})}function be({filePath:e,projectName:t}){let[n,r]=(0,P.useState)(null),[i,a]=(0,P.useState)(!1);(0,P.useEffect)(()=>{let n,i=`${d(t)}/files/raw?path=${encodeURIComponent(e)}`,o=f();return fetch(i,{headers:o?{Authorization:`Bearer ${o}`}:{}}).then(e=>{if(!e.ok)throw Error(`Failed`);return e.blob()}).then(e=>{let t=URL.createObjectURL(new Blob([e],{type:`application/pdf`}));n=t,r(t)}).catch(()=>a(!0)),()=>{n&&URL.revokeObjectURL(n)}},[e,t]);let o=(0,P.useCallback)(()=>{n&&window.open(n,`_blank`)},[n]);return i?(0,F.jsxs)(`div`,{className:`flex flex-col items-center justify-center h-full gap-3 text-text-secondary`,children:[(0,F.jsx)(N,{className:`size-10 text-text-subtle`}),(0,F.jsx)(`p`,{className:`text-sm`,children:`Failed to load PDF.`})]}):n?(0,F.jsxs)(`div`,{className:`flex flex-col h-full`,children:[(0,F.jsxs)(`div`,{className:`flex items-center justify-between px-3 py-1.5 border-b border-border bg-background shrink-0`,children:[(0,F.jsx)(`span`,{className:`text-xs text-text-secondary truncate`,children:e}),(0,F.jsxs)(`button`,{onClick:o,className:`flex items-center gap-1 text-xs text-text-secondary hover:text-text-primary transition-colors`,children:[(0,F.jsx)(O,{className:`size-3`}),` Open in new tab`]})]}),(0,F.jsx)(`iframe`,{src:n,title:e,className:`flex-1 w-full border-none`})]}):(0,F.jsx)(`div`,{className:`flex items-center justify-center h-full`,children:(0,F.jsx)(T,{className:`size-5 animate-spin text-text-subtle`})})}export{V as CodeEditor};