shadow-claw 1.23.3 → 1.23.4

package/src/components/shadow-claw-file-viewer/shadow-claw-file-viewer.ts

@@ -251,6 +251,11 @@ export class ShadowClawFileViewer extends ShadowClawElement {
       return;
     }
 
+    const content = root.querySelector(".file-content");
+    content?.addEventListener("click", (event: Event) => {
+      void this.handlePreviewLinkClick(event as MouseEvent);
+    });
+
     const modal = root.querySelector(".file-modal");
     modal?.addEventListener("cancel", (event: Event) => {
       event.preventDefault();
@@ -706,9 +711,8 @@ export class ShadowClawFileViewer extends ShadowClawElement {
 
     const current = fileViewerStore.file;
     const filePath = current?.path || current?.name || "";
-    const routeDir = getFileRouteDirPath(
-      orchestratorStore.activeGroupId,
-      filePath,
+    const routeDir = applyBasePath(
+      getFileRouteDirPath(orchestratorStore.activeGroupId, filePath),
     );
     const resolved = resolveHrefAgainstRoute(
       payload.href,
@@ -1110,9 +1114,8 @@ export class ShadowClawFileViewer extends ShadowClawElement {
       return html;
     }
 
-    const routeDir = getFileRouteDirPath(
-      orchestratorStore.activeGroupId,
-      filePath,
+    const routeDir = applyBasePath(
+      getFileRouteDirPath(orchestratorStore.activeGroupId, filePath),
     );
     const parsed = new DOMParser().parseFromString(html, "text/html");
 
@@ -1509,9 +1512,8 @@ export class ShadowClawFileViewer extends ShadowClawElement {
     const current = fileViewerStore.file;
     const basePath = current?.path || current?.name || "";
     const href = link.getAttribute("href") || "";
-    const routeDir = getFileRouteDirPath(
-      orchestratorStore.activeGroupId,
-      basePath,
+    const routeDir = applyBasePath(
+      getFileRouteDirPath(orchestratorStore.activeGroupId, basePath),
     );
     const resolved = resolveHrefAgainstRoute(
       href,

package/src/components/shadow-claw-files/shadow-claw-files.css

@@ -361,7 +361,8 @@
 
 .files__new-label,
 .files__rename-label,
-.files__paste-rename-label {
+.files__paste-rename-label,
+.files__upload-conflict-rename-label {
   color: var(--shadow-claw-text-secondary);
   font-size: var(--shadow-claw-font-size-sm);
   font-weight: 600;
@@ -369,7 +370,8 @@
 
 .files__new-input,
 .files__rename-input,
-.files__paste-rename-input {
+.files__paste-rename-input,
+.files__upload-conflict-rename-input {
   background-color: var(--shadow-claw-bg-primary);
   border: 0.0625rem solid var(--shadow-claw-border-color);
   border-radius: var(--shadow-claw-radius-s);
@@ -379,7 +381,8 @@
   padding: 0.375rem 0.5rem;
 }
 
-.files__paste-rename-container {
+.files__paste-rename-container,
+.files__upload-conflict-rename-container {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -401,7 +404,8 @@
 
 .files__new-input:focus,
 .files__rename-input:focus,
-.files__paste-rename-input:focus {
+.files__paste-rename-input:focus,
+.files__upload-conflict-rename-input:focus {
   border-color: var(--shadow-claw-accent-primary);
   box-shadow: 0 0 0 0.125rem var(--shadow-claw-bg-tertiary);
   outline: none;
@@ -469,7 +473,8 @@
   opacity: 0.5;
 }
 
-.files__paste-dialog {
+.files__paste-dialog,
+.files__upload-conflict-dialog {
   background-color: var(--shadow-claw-bg-primary);
   border: 0.0625rem solid var(--shadow-claw-border-color);
   border-radius: var(--shadow-claw-radius-l, 1.5rem);
@@ -479,31 +484,36 @@
   width: calc(100vw - 2rem);
 }
 
-.files__paste-dialog::backdrop {
+.files__paste-dialog::backdrop,
+.files__upload-conflict-dialog::backdrop {
   background-color: rgba(0, 0, 0, 0.35);
 }
 
-.files__paste-form {
+.files__paste-form,
+.files__upload-conflict-form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding: 1.5rem;
 }
 
-.files__paste-title {
+.files__paste-title,
+.files__upload-conflict-title {
   font-size: 1.1rem;
   font-weight: 700;
   margin: 0;
 }
 
-.files__paste-message {
+.files__paste-message,
+.files__upload-conflict-message {
   color: var(--shadow-claw-text-secondary);
   font-size: var(--shadow-claw-font-size-sm);
   line-height: 1.4;
   margin: 0;
 }
 
-.files__paste-actions {
+.files__paste-actions,
+.files__upload-conflict-actions {
   display: flex;
   gap: 0.5rem;
   justify-content: flex-end;
@@ -514,7 +524,10 @@
 .files__paste-continue,
 .files__paste-apply,
 .files__paste-ok,
-.files__paste-overwrite {
+.files__paste-overwrite,
+.files__upload-conflict-cancel,
+.files__upload-conflict-ok,
+.files__upload-conflict-overwrite {
   background-color: transparent;
   border: 0.0625rem solid var(--shadow-claw-border-color);
   border-radius: var(--shadow-claw-radius-pill);
@@ -528,13 +541,16 @@
   transition: all 0.15s ease;
 }
 
-.files__paste-overwrite {
+.files__paste-overwrite,
+.files__upload-conflict-overwrite {
   border-color: var(--shadow-claw-error-color);
   color: var(--shadow-claw-error-color);
 }
 
 .files__paste-overwrite:hover,
-.files__paste-overwrite:focus-visible {
+.files__paste-overwrite:focus-visible,
+.files__upload-conflict-overwrite:hover,
+.files__upload-conflict-overwrite:focus-visible {
   background-color: var(--shadow-claw-error-color);
   color: var(--shadow-claw-on-error, white);
   outline: none;
@@ -542,7 +558,8 @@
 
 .files__paste-continue,
 .files__paste-apply,
-.files__paste-ok {
+.files__paste-ok,
+.files__upload-conflict-ok {
   background-color: var(--shadow-claw-text-primary);
   border-color: var(--shadow-claw-text-primary);
   color: var(--shadow-claw-bg-primary);
@@ -553,7 +570,9 @@
 .files__paste-apply:hover,
 .files__paste-apply:focus-visible,
 .files__paste-ok:hover,
-.files__paste-ok:focus-visible {
+.files__paste-ok:focus-visible,
+.files__upload-conflict-ok:hover,
+.files__upload-conflict-ok:focus-visible {
   background-color: var(--shadow-claw-accent-primary);
   border-color: var(--shadow-claw-accent-primary);
   color: var(--shadow-claw-on-primary);
@@ -561,7 +580,9 @@
 }
 
 .files__paste-cancel:hover,
-.files__paste-cancel:focus-visible {
+.files__paste-cancel:focus-visible,
+.files__upload-conflict-cancel:hover,
+.files__upload-conflict-cancel:focus-visible {
   border-color: var(--shadow-claw-text-primary);
   box-shadow: var(--shadow-claw-shadow-md);
   outline: none;
@@ -570,7 +591,10 @@
 .files__paste-cancel:disabled,
 .files__paste-continue:disabled,
 .files__paste-apply:disabled,
-.files__paste-ok:disabled {
+.files__paste-ok:disabled,
+.files__upload-conflict-cancel:disabled,
+.files__upload-conflict-ok:disabled,
+.files__upload-conflict-overwrite:disabled {
   cursor: not-allowed;
   opacity: 0.6;
 }

package/src/components/shadow-claw-files/shadow-claw-files.html

@@ -172,6 +172,41 @@
         </div>
       </form>
     </shadow-claw-dialog>
+    <shadow-claw-dialog
+      dialog-class="files__upload-conflict-dialog"
+      dialog-aria-label="File upload conflict"
+    >
+      <form class="files__upload-conflict-form" method="dialog">
+        <h3 class="files__upload-conflict-title">File Already Exists</h3>
+        <p class="files__upload-conflict-message"></p>
+        <div class="files__upload-conflict-rename-container">
+          <label
+            class="files__upload-conflict-rename-label"
+            for="files-upload-conflict-name"
+            >New Name</label
+          >
+          <input
+            class="files__upload-conflict-rename-input"
+            id="files-upload-conflict-name"
+            name="files-upload-conflict-name"
+            type="text"
+            autocomplete="off"
+            required
+          />
+        </div>
+        <div class="files__upload-conflict-actions">
+          <button class="files__upload-conflict-cancel" type="button">
+            Cancel
+          </button>
+          <button class="files__upload-conflict-overwrite" type="button">
+            Overwrite
+          </button>
+          <button class="files__upload-conflict-ok" type="submit">
+            Rename
+          </button>
+        </div>
+      </form>
+    </shadow-claw-dialog>
     <div class="files__content">
       <div class="files__terminal-slot" data-terminal-slot hidden></div>
       <p class="files__drop-hint">Drop files here to upload</p>

package/src/components/shadow-claw-files/shadow-claw-files.test.ts

@@ -41,6 +41,14 @@ jest.unstable_mockModule("../../storage/uploadGroupFile.js", () => ({
   uploadGroupFile: jest.fn(),
 }));
 
+jest.unstable_mockModule("../../db/getConfig.js", () => ({
+  getConfig: jest.fn<any>().mockResolvedValue(undefined),
+}));
+
+jest.unstable_mockModule("../../utils/ulid.js", () => ({
+  ulid: jest.fn(() => "mock-ulid"),
+}));
+
 jest.unstable_mockModule("../../storage/writeGroupFile.js", () => ({
   writeGroupFile: jest.fn(),
 }));
@@ -104,6 +112,9 @@ jest.unstable_mockModule("../../db/db.js", () => ({
   getDb: jest.fn<any>().mockResolvedValue({} as any),
 }));
 
+const { CONFIG_KEYS } = await import("../../config/config.js");
+const { getConfig } = await import("../../db/getConfig.js");
+const { uploadGroupFile } = await import("../../storage/uploadGroupFile.js");
 const { ShadowClawFiles } = await import("./shadow-claw-files.js");
 const { deleteGroupFile } = await import("../../storage/deleteGroupFile.js");
 const { renameGroupEntry } = await import("../../storage/renameGroupEntry.js");
@@ -145,6 +156,8 @@ describe("shadow-claw-files", () => {
 
     expect(template).toContain("files__rename-dialog");
 
+    expect(template).toContain("files__upload-conflict-dialog");
+
     expect(template).toContain("files__drop-hint");
 
     expect(template).toContain("files__upload-progress");
@@ -910,4 +923,210 @@ describe("shadow-claw-files", () => {
 
     document.body.removeChild(component);
   });
+
+  it("uploads files without ULID prefix by default", async () => {
+    const component = new ShadowClawFiles();
+    document.body.appendChild(component);
+    await component.render();
+
+    (getConfig as any).mockResolvedValue(undefined);
+    (orchestratorStore as any).currentPath = ".";
+    (orchestratorStore as any).files = [];
+
+    const file = new File(["content"], "document.pdf", {
+      type: "application/pdf",
+    });
+    await component.uploadFileList({} as any, [file]);
+
+    expect(uploadGroupFile).toHaveBeenCalledWith(
+      {} as any,
+      "default",
+      "document.pdf",
+      file,
+    );
+    expect(showSuccess).toHaveBeenCalledWith("Uploaded 1 file", 3000);
+
+    document.body.removeChild(component);
+  });
+
+  it("uploads files with ULID prefix when setting is enabled", async () => {
+    const component = new ShadowClawFiles();
+    document.body.appendChild(component);
+    await component.render();
+
+    (getConfig as any).mockImplementation((_db: any, key: string) => {
+      if (key === CONFIG_KEYS.FILES_UPLOAD_APPEND_ULID) {
+        return Promise.resolve("true");
+      }
+      return Promise.resolve(undefined);
+    });
+    (orchestratorStore as any).currentPath = "subfolder";
+    (orchestratorStore as any).files = [];
+
+    const file = new File(["content"], "image.png", {
+      type: "image/png",
+    });
+    await component.uploadFileList({} as any, [file]);
+
+    expect(uploadGroupFile).toHaveBeenCalledWith(
+      {} as any,
+      "default",
+      "subfolder/mock-ulid-image.png",
+      file,
+    );
+    expect(showSuccess).toHaveBeenCalledWith("Uploaded 1 file", 3000);
+
+    document.body.removeChild(component);
+  });
+
+  it("prompts conflict dialog and overwrites existing file when selected", async () => {
+    const component = new ShadowClawFiles();
+    document.body.appendChild(component);
+    await component.render();
+
+    (getConfig as any).mockResolvedValue(undefined);
+    (orchestratorStore as any).currentPath = ".";
+    (orchestratorStore as any).files = ["existing.txt"];
+    (orchestratorStore as any).pages = [
+      { groupId: "default", path: "existing.txt" },
+    ];
+
+    jest.spyOn(component, "promptUploadConflict").mockResolvedValue({
+      action: "overwrite",
+    });
+
+    const file = new File(["new content"], "existing.txt", {
+      type: "text/plain",
+    });
+    await component.uploadFileList({} as any, [file]);
+
+    expect(component.promptUploadConflict).toHaveBeenCalledWith(
+      "existing.txt",
+      expect.any(Set),
+    );
+    expect(mockRemovePage).toHaveBeenCalledWith(
+      {} as any,
+      "existing.txt",
+      "default",
+    );
+    expect(uploadGroupFile).toHaveBeenCalledWith(
+      {} as any,
+      "default",
+      "existing.txt",
+      file,
+    );
+    expect(showSuccess).toHaveBeenCalledWith("Uploaded 1 file", 3000);
+
+    document.body.removeChild(component);
+  });
+
+  it("prompts conflict dialog and renames file when new name is chosen", async () => {
+    const component = new ShadowClawFiles();
+    document.body.appendChild(component);
+    await component.render();
+
+    (getConfig as any).mockResolvedValue(undefined);
+    (orchestratorStore as any).currentPath = "docs";
+    (orchestratorStore as any).files = ["existing.txt"];
+
+    jest.spyOn(component, "promptUploadConflict").mockResolvedValue({
+      action: "rename",
+      name: "existing-renamed.txt",
+    });
+
+    const file = new File(["content"], "existing.txt", {
+      type: "text/plain",
+    });
+    await component.uploadFileList({} as any, [file]);
+
+    expect(component.promptUploadConflict).toHaveBeenCalledWith(
+      "existing.txt",
+      expect.any(Set),
+    );
+    expect(uploadGroupFile).toHaveBeenCalledWith(
+      {} as any,
+      "default",
+      "docs/existing-renamed.txt",
+      file,
+    );
+    expect(showSuccess).toHaveBeenCalledWith("Uploaded 1 file", 3000);
+
+    document.body.removeChild(component);
+  });
+
+  it("prompts conflict dialog and skips upload when user cancels", async () => {
+    const component = new ShadowClawFiles();
+    document.body.appendChild(component);
+    await component.render();
+
+    (getConfig as any).mockResolvedValue(undefined);
+    (orchestratorStore as any).currentPath = ".";
+    (orchestratorStore as any).files = ["existing.txt"];
+
+    jest.spyOn(component, "promptUploadConflict").mockResolvedValue(null);
+
+    const file = new File(["content"], "existing.txt", {
+      type: "text/plain",
+    });
+    await component.uploadFileList({} as any, [file]);
+
+    expect(component.promptUploadConflict).toHaveBeenCalledWith(
+      "existing.txt",
+      expect.any(Set),
+    );
+    expect(uploadGroupFile).not.toHaveBeenCalled();
+
+    document.body.removeChild(component);
+  });
+
+  it("handles conflict dialog UI submission and validation", async () => {
+    const component = new ShadowClawFiles();
+    document.body.appendChild(component);
+    await component.render();
+
+    const existingNames = new Set(["existing.txt", "taken.txt"]);
+    const conflictPromise = component.promptUploadConflict(
+      "existing.txt",
+      existingNames,
+    );
+
+    const input = component.shadowRoot?.querySelector(
+      ".files__upload-conflict-rename-input",
+    ) as HTMLInputElement;
+    const form = component.shadowRoot?.querySelector(
+      ".files__upload-conflict-form",
+    ) as HTMLFormElement;
+
+    expect(input.value).toBe("existing.txt");
+
+    // 1. Try empty name
+    input.value = "   ";
+    form.dispatchEvent(new Event("submit"));
+    expect(showWarning).toHaveBeenCalledWith("Please enter a name", 3000);
+
+    // 2. Try path name
+    input.value = "folder/name.txt";
+    form.dispatchEvent(new Event("submit"));
+    expect(showWarning).toHaveBeenCalledWith(
+      "Use only a name, not a path",
+      3500,
+    );
+
+    // 3. Try already taken name
+    input.value = "taken.txt";
+    form.dispatchEvent(new Event("submit"));
+    expect(showWarning).toHaveBeenCalledWith(
+      '"taken.txt" already exists. Please choose a different name.',
+      4000,
+    );
+
+    // 4. Valid new name
+    input.value = "brand-new.txt";
+    form.dispatchEvent(new Event("submit"));
+
+    const result = await conflictPromise;
+    expect(result).toEqual({ action: "rename", name: "brand-new.txt" });
+
+    document.body.removeChild(component);
+  });
 });