shiplightai 0.1.71 → 0.1.73

package/dist/static/assets/{index-BQYw0-8-.js → index-CsPWUDqs.js}

@@ -7352,6 +7352,22 @@ function ContextMenu({ x, y, items, onDismiss }) {
     }
   );
 }
+const EXPANDED_DIRS_KEY = "shp-debugger-expanded-dirs";
+function loadExpandedPaths() {
+  try {
+    const raw = localStorage.getItem(EXPANDED_DIRS_KEY);
+    if (!raw) return /* @__PURE__ */ new Set();
+    return new Set(JSON.parse(raw));
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
+function saveExpandedPaths(paths) {
+  try {
+    localStorage.setItem(EXPANDED_DIRS_KEY, JSON.stringify([...paths]));
+  } catch {
+  }
+}
 async function fetchDir(dir) {
   try {
     const res = await fetch(`/api/files?dir=${encodeURIComponent(dir)}`);
@@ -7380,7 +7396,7 @@ function updateNode(nodes, targetPath, updater) {
   });
 }
 function FileTreePanel(props) {
-  const { initialDir, expandToFile, sessions, focusedPath, onFocus, onOpen } = props;
+  const { initialDir, expandToFile, sessions, focusedPath, onFocus, onOpen, onCollapse } = props;
   const [rootNodes, setRootNodes] = reactExports.useState([]);
   const [rootDir, setRootDir] = reactExports.useState(initialDir);
   const [error, setError] = reactExports.useState(null);
@@ -7392,6 +7408,20 @@ function FileTreePanel(props) {
     }
     return set;
   }, [sessions]);
+  const expandedPathsRef = reactExports.useRef(loadExpandedPaths());
+  const persistExpanded = reactExports.useCallback((path, expanded) => {
+    const set = expandedPathsRef.current;
+    if (expanded) {
+      set.add(path);
+    } else {
+      set.delete(path);
+      const prefix = path + "/";
+      for (const p of set) {
+        if (p.startsWith(prefix)) set.delete(p);
+      }
+    }
+    saveExpandedPaths(set);
+  }, []);
   reactExports.useEffect(() => {
     let cancelled = false;
     async function load() {
@@ -7410,6 +7440,25 @@ function FileTreePanel(props) {
       } else {
         setRootNodes(nodes);
       }
+      const saved = expandedPathsRef.current;
+      if (saved.size > 0 && !cancelled) {
+        const sorted = [...saved].sort(
+          (a, b) => a.split("/").length - b.split("/").length
+        );
+        for (const dirPath of sorted) {
+          if (cancelled) break;
+          const dirResp = await fetchDir(dirPath);
+          if (!dirResp) {
+            saved.delete(dirPath);
+            continue;
+          }
+          const children = entriesToNodes(dirResp.entries);
+          setRootNodes(
+            (prev) => updateNode(prev, dirPath, (n) => ({ ...n, children, expanded: true }))
+          );
+        }
+        saveExpandedPaths(saved);
+      }
     }
     void load();
     return () => {
@@ -7423,22 +7472,25 @@ function FileTreePanel(props) {
     setRootNodes(
       (prev) => updateNode(prev, node.path, (n) => ({ ...n, children, expanded: true }))
     );
-  }, []);
+    persistExpanded(node.path, true);
+  }, [persistExpanded]);
   const toggleDir = reactExports.useCallback(
     (node) => {
       if (node.expanded) {
         setRootNodes(
           (prev) => updateNode(prev, node.path, (n) => ({ ...n, expanded: false }))
         );
+        persistExpanded(node.path, false);
       } else if (node.children === null) {
         void expandDir(node);
       } else {
         setRootNodes(
           (prev) => updateNode(prev, node.path, (n) => ({ ...n, expanded: true }))
         );
+        persistExpanded(node.path, true);
       }
     },
-    [expandDir]
+    [expandDir, persistExpanded]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
@@ -7452,20 +7504,49 @@ function FileTreePanel(props) {
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
             style: {
-              padding: "8px 12px",
+              display: "flex",
+              alignItems: "center",
+              height: 36,
+              padding: "0 4px 0 12px",
               fontSize: 11,
               fontWeight: 600,
               textTransform: "uppercase",
               letterSpacing: 0.4,
               color: colors.textMuted,
               borderBottom: `1px solid ${colors.bgHover}`,
-              flexShrink: 0
+              flexShrink: 0,
+              boxSizing: "border-box"
             },
-            children: "Tests"
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { flex: 1 }, children: "Tests" }),
+              onCollapse && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Collapse sidebar",
+                  onClick: onCollapse,
+                  style: {
+                    width: 24,
+                    height: 24,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    border: "none",
+                    background: "transparent",
+                    color: colors.textMuted,
+                    cursor: "pointer",
+                    padding: 0,
+                    borderRadius: 4,
+                    flexShrink: 0
+                  },
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M10 3.5L5.5 8 10 12.5V3.5z" }) })
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -7600,6 +7681,7 @@ function TreeRow({
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "span",
             {
+              title: node.name,
               style: {
                 flex: 1,
                 whiteSpace: "nowrap",
@@ -7859,6 +7941,37 @@ function DebuggerShellApp() {
   const [focusedPath, setFocusedPath] = reactExports.useState(bootstrap.initialFile);
   const sessionsState = useSessions();
   const autoOpenedRef = reactExports.useRef(false);
+  const [asideWidth, setAsideWidth] = reactExports.useState(280);
+  const [isDragging, setIsDragging] = reactExports.useState(false);
+  const [collapsed, setCollapsed] = reactExports.useState(false);
+  const dragCleanupRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    return () => {
+      var _a;
+      (_a = dragCleanupRef.current) == null ? void 0 : _a.call(dragCleanupRef);
+    };
+  }, []);
+  const onResizeStart = reactExports.useCallback((e) => {
+    var _a;
+    e.preventDefault();
+    const startX = e.clientX;
+    const startWidth = asideWidth;
+    setIsDragging(true);
+    const onMouseMove = (ev) => {
+      const newWidth = Math.max(160, Math.min(600, startWidth + ev.clientX - startX));
+      setAsideWidth(newWidth);
+    };
+    const cleanup = () => {
+      setIsDragging(false);
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", cleanup);
+      dragCleanupRef.current = null;
+    };
+    (_a = dragCleanupRef.current) == null ? void 0 : _a.call(dragCleanupRef);
+    dragCleanupRef.current = cleanup;
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", cleanup);
+  }, [asideWidth]);
   reactExports.useEffect(() => {
     let cancelled = false;
     (async () => {
@@ -7891,35 +8004,106 @@ function DebuggerShellApp() {
           height: "100%",
           width: "100%",
           color: colors.textBody,
-          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif"
+          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+          cursor: isDragging ? "col-resize" : void 0,
+          userSelect: isDragging ? "none" : void 0
         },
         children: [
+          isDragging && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              style: {
+                position: "fixed",
+                inset: 0,
+                zIndex: 9999,
+                cursor: "col-resize"
+              }
+            }
+          ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "aside",
             {
               "data-testid": "file-tree-panel",
               style: {
-                width: 280,
+                width: collapsed ? 36 : asideWidth,
                 flexShrink: 0,
                 height: "100%",
-                background: colors.bgPanel
+                background: colors.bgPanel,
+                position: "relative",
+                overflow: "hidden",
+                transition: isDragging ? "none" : "width 200ms ease"
               },
               children: [
-                resolvedInitialDir && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  FileTreePanel,
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
                   {
-                    initialDir: resolvedInitialDir,
-                    expandToFile: bootstrap.initialFile,
-                    sessions: sessionsState.sessions,
-                    focusedPath,
-                    onFocus: setFocusedPath,
-                    onOpen: (path) => {
-                      setFocusedPath(path);
-                      sessionsState.openSession(path);
-                    }
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      opacity: collapsed ? 1 : 0,
+                      pointerEvents: collapsed ? "auto" : "none",
+                      transition: "opacity 200ms ease"
+                    },
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": "Expand sidebar",
+                        onClick: () => setCollapsed(false),
+                        style: toggleBtnStyle,
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6 3.5L10.5 8 6 12.5V3.5z" }) })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "div",
+                  {
+                    style: {
+                      width: asideWidth,
+                      height: "100%",
+                      opacity: collapsed ? 0 : 1,
+                      pointerEvents: collapsed ? "none" : "auto",
+                      transition: "opacity 200ms ease"
+                    },
+                    children: [
+                      resolvedInitialDir && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        FileTreePanel,
+                        {
+                          initialDir: resolvedInitialDir,
+                          expandToFile: bootstrap.initialFile,
+                          sessions: sessionsState.sessions,
+                          focusedPath,
+                          onFocus: setFocusedPath,
+                          onOpen: (path) => {
+                            setFocusedPath(path);
+                            sessionsState.openSession(path);
+                          },
+                          onCollapse: () => setCollapsed(true)
+                        }
+                      ),
+                      !resolvedInitialDir && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { padding: 12, color: colors.textDim, fontSize: 13 }, children: "Loading file tree…" })
+                    ]
                   }
                 ),
-                !resolvedInitialDir && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { padding: 12, color: colors.textDim, fontSize: 13 }, children: "Loading file tree…" })
+                !collapsed && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    "data-testid": "resize-handle",
+                    role: "separator",
+                    "aria-orientation": "vertical",
+                    onMouseDown: onResizeStart,
+                    style: {
+                      position: "absolute",
+                      top: 0,
+                      right: 0,
+                      width: 4,
+                      height: "100%",
+                      cursor: "col-resize",
+                      zIndex: 10
+                    }
+                  }
+                )
               ]
             }
           ),
@@ -7967,6 +8151,20 @@ function DebuggerShellApp() {
     )
   ] });
 }
+const toggleBtnStyle = {
+  width: 36,
+  height: 36,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "none",
+  background: "transparent",
+  color: colors.textMuted,
+  cursor: "pointer",
+  padding: 0,
+  borderBottom: `1px solid ${colors.bgHover}`,
+  boxSizing: "border-box"
+};
 const globalCss = `
   html, body, #root { height: 100%; margin: 0; padding: 0; }
   * { box-sizing: border-box; }
@@ -7977,4 +8175,4 @@ const container = document.getElementById("root");
 if (container) {
   clientExports.createRoot(container).render(/* @__PURE__ */ jsxRuntimeExports.jsx(DebuggerShellApp, {}));
 }
-//# sourceMappingURL=index-BQYw0-8-.js.map
+//# sourceMappingURL=index-CsPWUDqs.js.map

package/dist/static/index.html

@@ -13,7 +13,7 @@
     html, body { margin: 0; height: 100%; background: #1a1b1e; color: #c1c2c5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }
     #root { height: 100%; }
   </style>
-  <script type="module" crossorigin src="/assets/index-BQYw0-8-.js"></script>
+  <script type="module" crossorigin src="/assets/index-CsPWUDqs.js"></script>
 </head>
 <body>
   <div id="root"></div>