@gallop.software/studio 0.1.87 → 0.1.89

package/dist/{StudioUI-6HTM3QHM.mjs → StudioUI-T7FA7S7Z.mjs}

@@ -310,6 +310,23 @@ var progressStyles = {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+  `,
+  errorList: css`
+    margin-top: 12px;
+    padding: 12px;
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    border-radius: 6px;
+    max-height: 200px;
+    overflow-y: auto;
+  `,
+  errorItem: css`
+    font-size: ${fontSize.xs};
+    color: #991b1b;
+    margin: 0 0 4px;
+    &:last-child {
+      margin-bottom: 0;
+    }
   `
 };
 function ProgressModal({
@@ -331,26 +348,36 @@ function ProgressModal({
       " image",
       (progress.processed ?? progress.current) !== 1 ? "s" : "",
       " before stopping."
-    ] }) : isComplete ? /* @__PURE__ */ jsxs("p", { css: styles.message, children: [
-      "Processed ",
-      progress.processed,
-      " image",
-      progress.processed !== 1 ? "s" : "",
-      ".",
-      progress.orphansRemoved !== void 0 && progress.orphansRemoved > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        " Removed ",
-        progress.orphansRemoved,
-        " orphaned thumbnail",
-        progress.orphansRemoved !== 1 ? "s" : "",
-        "."
-      ] }) : null,
-      progress.errors !== void 0 && progress.errors > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        " ",
-        progress.errors,
-        " error",
-        progress.errors !== 1 ? "s" : "",
-        " occurred."
-      ] }) : null
+    ] }) : isComplete ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("p", { css: styles.message, children: [
+        "Processed ",
+        progress.processed,
+        " image",
+        progress.processed !== 1 ? "s" : "",
+        ".",
+        progress.orphansRemoved !== void 0 && progress.orphansRemoved > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " Removed ",
+          progress.orphansRemoved,
+          " orphaned thumbnail",
+          progress.orphansRemoved !== 1 ? "s" : "",
+          "."
+        ] }) : null,
+        progress.errors !== void 0 && progress.errors > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          progress.errors,
+          " error",
+          progress.errors !== 1 ? "s" : "",
+          " occurred."
+        ] }) : null
+      ] }),
+      progress.errorMessages && progress.errorMessages.length > 0 && /* @__PURE__ */ jsxs("div", { css: progressStyles.errorList, children: [
+        progress.errorMessages.slice(0, 10).map((msg, i) => /* @__PURE__ */ jsx("p", { css: progressStyles.errorItem, children: msg }, i)),
+        progress.errorMessages.length > 10 && /* @__PURE__ */ jsxs("p", { css: progressStyles.errorItem, children: [
+          "...and ",
+          progress.errorMessages.length - 10,
+          " more"
+        ] })
+      ] })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("p", { css: styles.message, children: progress.status === "cleanup" ? "Cleaning up orphaned files..." : `Processing images...` }),
       /* @__PURE__ */ jsxs("div", { css: progressStyles.progressContainer, children: [
@@ -1262,7 +1289,7 @@ function StudioToolbar() {
   const fileInputRef = useRef(null);
   const abortControllerRef = useRef(null);
   const [uploading, setUploading] = useState3(false);
-  const [refreshing, setRefreshing] = useState3(false);
+  const [scanning, setScanning] = useState3(false);
   const [processing, setProcessing] = useState3(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState3(false);
   const [showProcessConfirm, setShowProcessConfirm] = useState3(false);
@@ -1288,10 +1315,81 @@ function StudioToolbar() {
   const handleUpload = useCallback(() => {
     fileInputRef.current?.click();
   }, []);
-  const handleRefresh = useCallback(() => {
-    setRefreshing(true);
-    triggerRefresh();
-    setTimeout(() => setRefreshing(false), 600);
+  const handleScan = useCallback(async () => {
+    setScanning(true);
+    setShowProgress(true);
+    setProgressState({
+      current: 0,
+      total: 0,
+      percent: 0,
+      status: "processing",
+      message: "Scanning for files..."
+    });
+    try {
+      const response = await fetch("/api/studio/scan", { method: "POST" });
+      const reader = response.body?.getReader();
+      if (!reader) throw new Error("No reader");
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n\n");
+        buffer = lines.pop() || "";
+        for (const line of lines) {
+          if (!line.startsWith("data: ")) continue;
+          const data = JSON.parse(line.slice(6));
+          if (data.type === "start") {
+            setProgressState({
+              current: 0,
+              total: data.total,
+              percent: 0,
+              status: "processing",
+              message: `Scanning ${data.total} files...`
+            });
+          } else if (data.type === "progress") {
+            setProgressState({
+              current: data.current,
+              total: data.total,
+              percent: data.percent,
+              status: "processing",
+              currentFile: data.currentFile
+            });
+          } else if (data.type === "complete") {
+            setProgressState({
+              current: data.total || 0,
+              total: data.total || 0,
+              percent: 100,
+              status: "complete",
+              processed: data.added,
+              errors: data.errors,
+              message: data.renamed > 0 ? `${data.renamed} file(s) renamed due to conflicts` : void 0
+            });
+            triggerRefresh();
+          } else if (data.type === "error") {
+            setProgressState({
+              current: 0,
+              total: 0,
+              percent: 0,
+              status: "error",
+              message: data.message || "Scan failed"
+            });
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Scan error:", error);
+      setProgressState({
+        current: 0,
+        total: 0,
+        percent: 0,
+        status: "error",
+        message: "Scan failed"
+      });
+    } finally {
+      setScanning(false);
+    }
   }, [triggerRefresh]);
   const handleFileChange = useCallback(async (e) => {
     const files = e.target.files;
@@ -1704,6 +1802,7 @@ function StudioToolbar() {
     setShowProgress(true);
     let synced = 0;
     let errors = 0;
+    const errorMessages = [];
     try {
       for (let i = 0; i < imageKeys.length; i++) {
         const imageKey = imageKeys[i];
@@ -1728,13 +1827,18 @@ function StudioToolbar() {
               return;
             }
             errors++;
+            errorMessages.push(data.error || `Failed: ${imageKey}`);
           } else if (data.synced?.length > 0) {
             synced++;
           } else if (data.errors?.length > 0) {
             errors++;
+            for (const errMsg of data.errors) {
+              errorMessages.push(errMsg);
+            }
           }
-        } catch {
+        } catch (err) {
           errors++;
+          errorMessages.push(`Network error: ${imageKey}`);
         }
       }
       setProgressState({
@@ -1743,7 +1847,8 @@ function StudioToolbar() {
         percent: 100,
         status: "complete",
         processed: synced,
-        errors
+        errors,
+        errorMessages: errorMessages.length > 0 ? errorMessages : void 0
       });
       clearSelection();
       triggerRefresh();
@@ -2070,12 +2175,16 @@ function StudioToolbar() {
           " selected",
           /* @__PURE__ */ jsx4("button", { css: styles4.clearBtn, onClick: clearSelection, children: "Clear" })
         ] }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs4(
           "button",
           {
-            css: [styles4.btn, styles4.btnIconOnly],
-            onClick: handleRefresh,
-            children: /* @__PURE__ */ jsx4(RefreshIcon, { spinning: refreshing })
+            css: styles4.btn,
+            onClick: handleScan,
+            disabled: scanning,
+            children: [
+              /* @__PURE__ */ jsx4(ScanIcon, { spinning: scanning }),
+              "Scan"
+            ]
           }
         ),
         /* @__PURE__ */ jsxs4("div", { css: styles4.viewToggle, children: [
@@ -2105,7 +2214,7 @@ function StudioToolbar() {
 function UploadIcon() {
   return /* @__PURE__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) });
 }
-function RefreshIcon({ spinning }) {
+function ScanIcon({ spinning }) {
   return /* @__PURE__ */ jsx4("svg", { css: [styles4.icon, spinning && styles4.iconSpin], fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) });
 }
 function TrashIcon() {
@@ -2239,6 +2348,7 @@ function useFileList() {
   } = useStudio();
   const [items, setItems] = useState4([]);
   const [loading, setLoading] = useState4(true);
+  const [metaEmpty, setMetaEmpty] = useState4(false);
   const isInitialLoad = useRef2(true);
   const lastPath = useRef2(currentPath);
   useEffect2(() => {
@@ -2251,10 +2361,12 @@ function useFileList() {
       try {
         const data = searchQuery && searchQuery.length >= 2 ? await studioApi.search(searchQuery) : await studioApi.list(currentPath);
         setItems(data.items || []);
+        setMetaEmpty(data.isEmpty === true);
       } catch (error) {
         const message = error instanceof Error ? error.message : "Failed to load items";
         showError("Load Error", message);
         setItems([]);
+        setMetaEmpty(false);
       }
       setLoading(false);
       isInitialLoad.current = false;
@@ -2306,6 +2418,7 @@ function useFileList() {
     items,
     loading,
     sortedItems,
+    metaEmpty,
     // Computed
     isAtRoot,
     isSearching,
@@ -2366,6 +2479,27 @@ var styles5 = {
       font-size: ${fontSize.sm};
     }
   `,
+  scanButton: css5`
+    margin-top: 16px;
+    padding: 10px 24px;
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    background: ${colors.primary};
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.15s ease;
+    
+    &:hover:not(:disabled) {
+      background: ${colors.primaryHover};
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  `,
   grid: css5`
     display: grid;
     grid-template-columns: 1fr;
@@ -2649,6 +2783,7 @@ function StudioFileGrid() {
   const {
     loading,
     sortedItems,
+    metaEmpty,
     isAtRoot,
     isSearching,
     allItemsSelected,
@@ -2660,14 +2795,42 @@ function StudioFileGrid() {
     handleGenerateThumbnail,
     handleSelectAll
   } = useFileList();
+  const [scanning, setScanning] = useState5(false);
+  const handleScan = async () => {
+    setScanning(true);
+    try {
+      await fetch("/api/studio/scan", { method: "POST" });
+      window.location.reload();
+    } catch (error) {
+      console.error("Scan failed:", error);
+    } finally {
+      setScanning(false);
+    }
+  };
   if (loading) {
     return /* @__PURE__ */ jsx5("div", { css: styles5.loading, children: /* @__PURE__ */ jsx5("div", { css: styles5.spinner }) });
   }
+  if (metaEmpty && isAtRoot) {
+    return /* @__PURE__ */ jsxs5("div", { css: styles5.empty, children: [
+      /* @__PURE__ */ jsx5("svg", { css: styles5.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+      /* @__PURE__ */ jsx5("p", { css: styles5.emptyText, children: "No files tracked yet" }),
+      /* @__PURE__ */ jsx5("p", { css: styles5.emptyText, children: "Click Scan to discover files in your public folder" }),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          css: styles5.scanButton,
+          onClick: handleScan,
+          disabled: scanning,
+          children: scanning ? "Scanning..." : "Scan for Files"
+        }
+      )
+    ] });
+  }
   if (sortedItems.length === 0 && isAtRoot) {
     return /* @__PURE__ */ jsxs5("div", { css: styles5.empty, children: [
       /* @__PURE__ */ jsx5("svg", { css: styles5.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
       /* @__PURE__ */ jsx5("p", { css: styles5.emptyText, children: "No files in this folder" }),
-      /* @__PURE__ */ jsx5("p", { css: styles5.emptyText, children: "Upload images to get started" })
+      /* @__PURE__ */ jsx5("p", { css: styles5.emptyText, children: "Upload images or click Scan in the toolbar" })
     ] });
   }
   return /* @__PURE__ */ jsxs5("div", { children: [
@@ -2864,6 +3027,32 @@ var styles6 = {
     height: 256px;
     color: ${colors.textSecondary};
   `,
+  emptyHint: css6`
+    font-size: ${fontSize.sm};
+    color: ${colors.textMuted};
+    margin-top: 4px;
+  `,
+  scanButton: css6`
+    margin-top: 16px;
+    padding: 10px 24px;
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    background: ${colors.primary};
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.15s ease;
+    
+    &:hover:not(:disabled) {
+      background: ${colors.primaryHover};
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  `,
   tableWrapper: css6`
     background: ${colors.surface};
     border-radius: 8px;
@@ -3150,6 +3339,7 @@ function StudioFileList() {
   const {
     loading,
     sortedItems,
+    metaEmpty,
     isAtRoot,
     isSearching,
     allItemsSelected,
@@ -3161,11 +3351,41 @@ function StudioFileList() {
     handleGenerateThumbnail,
     handleSelectAll
   } = useFileList();
+  const [scanning, setScanning] = useState6(false);
+  const handleScan = async () => {
+    setScanning(true);
+    try {
+      await fetch("/api/studio/scan", { method: "POST" });
+      window.location.reload();
+    } catch (error) {
+      console.error("Scan failed:", error);
+    } finally {
+      setScanning(false);
+    }
+  };
   if (loading) {
     return /* @__PURE__ */ jsx6("div", { css: styles6.loading, children: /* @__PURE__ */ jsx6("div", { css: styles6.spinner }) });
   }
+  if (metaEmpty && isAtRoot) {
+    return /* @__PURE__ */ jsxs6("div", { css: styles6.empty, children: [
+      /* @__PURE__ */ jsx6("p", { children: "No files tracked yet" }),
+      /* @__PURE__ */ jsx6("p", { css: styles6.emptyHint, children: "Click Scan to discover files in your public folder" }),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          css: styles6.scanButton,
+          onClick: handleScan,
+          disabled: scanning,
+          children: scanning ? "Scanning..." : "Scan for Files"
+        }
+      )
+    ] });
+  }
   if (sortedItems.length === 0 && isAtRoot) {
-    return /* @__PURE__ */ jsx6("div", { css: styles6.empty, children: /* @__PURE__ */ jsx6("p", { children: "No files in this folder" }) });
+    return /* @__PURE__ */ jsxs6("div", { css: styles6.empty, children: [
+      /* @__PURE__ */ jsx6("p", { children: "No files in this folder" }),
+      /* @__PURE__ */ jsx6("p", { css: styles6.emptyHint, children: "Upload images or click Scan in the toolbar" })
+    ] });
   }
   return /* @__PURE__ */ jsx6("div", { css: styles6.tableWrapper, children: /* @__PURE__ */ jsxs6("table", { css: styles6.table, children: [
     /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs6("tr", { children: [
@@ -4661,4 +4881,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-6HTM3QHM.mjs.map
+//# sourceMappingURL=StudioUI-T7FA7S7Z.mjs.map