sh3-core 0.19.6 → 0.20.2

package/dist/primitives/widgets/_DocumentBrowser.svelte.test.js

@@ -0,0 +1,277 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, fireEvent, screen } from '@testing-library/svelte';
+import DocumentBrowser from './_DocumentBrowser.svelte';
+function makeHandle() {
+    return {
+        mkdir: vi.fn().mockResolvedValue(undefined),
+        rmdir: vi.fn().mockResolvedValue(undefined),
+        renameFolder: vi.fn().mockResolvedValue(undefined),
+        rename: vi.fn().mockResolvedValue(undefined),
+        delete: vi.fn().mockResolvedValue(undefined),
+    };
+}
+const sampleDocs = [
+    { shardId: 'sh1', path: 'a.md', size: 100, lastModified: 0 },
+    { shardId: 'sh1', path: 'sub/b.md', size: 200, lastModified: 0 },
+];
+function baseProps(extra = {}) {
+    return Object.assign({ mode: 'open', docs: sampleDocs, onCommit: vi.fn(), onCancel: vi.fn(), close: vi.fn() }, extra);
+}
+describe('_DocumentBrowser toolbar visibility', () => {
+    it('toolbar is hidden at the shard-list view (shardId === null)', async () => {
+        render(DocumentBrowser, { props: baseProps({ handle: makeHandle() }) });
+        expect(document.querySelector('.sh3-doc-browser__toolbar')).toBeNull();
+    });
+    it('toolbar is visible when inside a shard and handle is provided', async () => {
+        const { container } = render(DocumentBrowser, { props: baseProps({ handle: makeHandle() }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        expect(container.querySelector('.sh3-doc-browser__toolbar')).not.toBeNull();
+    });
+    it('toolbar is hidden when readOnlyShard returns true', async () => {
+        const { container } = render(DocumentBrowser, {
+            props: baseProps({ handle: makeHandle(), readOnlyShard: () => true }),
+        });
+        await fireEvent.click(screen.getByText('sh1'));
+        expect(container.querySelector('.sh3-doc-browser__toolbar')).toBeNull();
+    });
+    it('toolbar is hidden when no handle is provided', async () => {
+        const { container } = render(DocumentBrowser, { props: baseProps() });
+        await fireEvent.click(screen.getByText('sh1'));
+        expect(container.querySelector('.sh3-doc-browser__toolbar')).toBeNull();
+    });
+});
+describe('_DocumentBrowser navigation', () => {
+    it('clicking a shard navigates into it and shows its contents', async () => {
+        render(DocumentBrowser, { props: baseProps() });
+        expect(screen.getByText('sh1')).not.toBeNull();
+        await fireEvent.click(screen.getByText('sh1'));
+        expect(screen.getByText('a.md')).not.toBeNull();
+        expect(screen.getByText('sub')).not.toBeNull();
+    });
+    it('double-clicking a file commits it in open mode', async () => {
+        const onCommit = vi.fn();
+        const close = vi.fn();
+        render(DocumentBrowser, { props: baseProps({ onCommit, close }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        await fireEvent.dblClick(screen.getByText('a.md'));
+        expect(onCommit).toHaveBeenCalledWith({ shardId: 'sh1', path: 'a.md', kind: 'file' });
+        expect(close).toHaveBeenCalled();
+    });
+    it('double-clicking a folder navigates into it', async () => {
+        render(DocumentBrowser, { props: baseProps() });
+        await fireEvent.click(screen.getByText('sh1'));
+        await fireEvent.dblClick(screen.getByText('sub'));
+        expect(screen.getByText('b.md')).not.toBeNull();
+    });
+    it('clicking a folder with selectable=folder selects it, not navigates', async () => {
+        const onCommit = vi.fn();
+        render(DocumentBrowser, {
+            props: baseProps({ onCommit, selectable: 'folder' }),
+        });
+        // Use dblClick to navigate into sh1 (dblClick always navigates)
+        await fireEvent.dblClick(screen.getByText('sh1'));
+        // Now inside sh1: clicking sub should select it, not navigate
+        await fireEvent.click(screen.getByText('sub'));
+        expect(screen.queryByText('b.md')).toBeNull(); // not navigated
+        // Open button should be enabled since a folder is selected
+        const openBtn = screen.getByText('Open');
+        expect(openBtn.disabled).toBe(false);
+    });
+});
+describe('_DocumentBrowser commit and cancel', () => {
+    it('Open button is disabled when nothing is selected', async () => {
+        render(DocumentBrowser, { props: baseProps() });
+        await fireEvent.click(screen.getByText('sh1'));
+        const openBtn = screen.getByText('Open');
+        expect(openBtn.disabled).toBe(true);
+    });
+    it('Open button is enabled when a file is selected', async () => {
+        render(DocumentBrowser, { props: baseProps() });
+        await fireEvent.click(screen.getByText('sh1'));
+        await fireEvent.click(screen.getByText('a.md'));
+        const openBtn = screen.getByText('Open');
+        expect(openBtn.disabled).toBe(false);
+    });
+    it('clicking Open commits the selected file', async () => {
+        const onCommit = vi.fn();
+        const close = vi.fn();
+        render(DocumentBrowser, { props: baseProps({ onCommit, close }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        await fireEvent.click(screen.getByText('a.md'));
+        await fireEvent.click(screen.getByText('Open'));
+        expect(onCommit).toHaveBeenCalledWith({ shardId: 'sh1', path: 'a.md', kind: 'file' });
+        expect(close).toHaveBeenCalled();
+    });
+    it('Cancel calls onCancel and close', async () => {
+        const onCancel = vi.fn();
+        const close = vi.fn();
+        render(DocumentBrowser, { props: baseProps({ onCancel, close }) });
+        await fireEvent.click(screen.getByText('Cancel'));
+        expect(onCancel).toHaveBeenCalled();
+        expect(close).toHaveBeenCalled();
+    });
+});
+describe('_DocumentBrowser new folder', () => {
+    beforeEach(() => { vi.clearAllMocks(); });
+    it('clicking New folder shows an inline editable row', async () => {
+        const handle = makeHandle();
+        const { container } = render(DocumentBrowser, { props: baseProps({ handle }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        const newFolderBtn = container.querySelector('[title="New folder"]');
+        await fireEvent.click(newFolderBtn);
+        const input = container.querySelector('.sh3-doc-browser__rename-input');
+        expect(input).not.toBeNull();
+    });
+    it('entering a name and pressing Enter calls handle.mkdir', async () => {
+        const handle = makeHandle();
+        const { container } = render(DocumentBrowser, { props: baseProps({ handle }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        const newFolderBtn = container.querySelector('[title="New folder"]');
+        await fireEvent.click(newFolderBtn);
+        const input = container.querySelector('.sh3-doc-browser__rename-input');
+        await fireEvent.input(input, { target: { value: 'newdir' } });
+        await fireEvent.keyDown(input, { key: 'Enter' });
+        expect(handle.mkdir).toHaveBeenCalledWith('sh1', 'newdir');
+    });
+    it('Esc cancels new folder without calling mkdir', async () => {
+        const handle = makeHandle();
+        const { container } = render(DocumentBrowser, { props: baseProps({ handle }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        const newFolderBtn = container.querySelector('[title="New folder"]');
+        await fireEvent.click(newFolderBtn);
+        const input = container.querySelector('.sh3-doc-browser__rename-input');
+        await fireEvent.keyDown(input, { key: 'Escape' });
+        expect(handle.mkdir).not.toHaveBeenCalled();
+        expect(container.querySelector('.sh3-doc-browser__rename-input')).toBeNull();
+    });
+    it('duplicate name shows error and does not call mkdir', async () => {
+        const handle = makeHandle();
+        const { container } = render(DocumentBrowser, { props: baseProps({ handle }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        const newFolderBtn = container.querySelector('[title="New folder"]');
+        await fireEvent.click(newFolderBtn);
+        const input = container.querySelector('.sh3-doc-browser__rename-input');
+        // 'sub' already exists as a folder from sampleDocs
+        await fireEvent.input(input, { target: { value: 'sub' } });
+        await fireEvent.keyDown(input, { key: 'Enter' });
+        expect(handle.mkdir).not.toHaveBeenCalled();
+        const errorEl = container.querySelector('.sh3-doc-browser__toolbar-error');
+        expect(errorEl === null || errorEl === void 0 ? void 0 : errorEl.textContent).toMatch(/already exists/);
+    });
+});
+describe('_DocumentBrowser rename', () => {
+    beforeEach(() => { vi.clearAllMocks(); });
+    it('clicking Rename while a file is selected shows inline input', async () => {
+        const handle = makeHandle();
+        const { container } = render(DocumentBrowser, { props: baseProps({ handle }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        await fireEvent.click(screen.getByText('a.md'));
+        const renameBtn = container.querySelector('[title="Rename"]');
+        await fireEvent.click(renameBtn);
+        const input = container.querySelector('.sh3-doc-browser__rename-input');
+        expect(input).not.toBeNull();
+        expect(input.value).toBe('a.md');
+    });
+    it('confirming rename calls handle.rename', async () => {
+        const handle = makeHandle();
+        const { container } = render(DocumentBrowser, { props: baseProps({ handle }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        await fireEvent.click(screen.getByText('a.md'));
+        const renameBtn = container.querySelector('[title="Rename"]');
+        await fireEvent.click(renameBtn);
+        const input = container.querySelector('.sh3-doc-browser__rename-input');
+        await fireEvent.input(input, { target: { value: 'renamed.md' } });
+        await fireEvent.keyDown(input, { key: 'Enter' });
+        expect(handle.rename).toHaveBeenCalledWith('sh1', 'a.md', 'renamed.md');
+    });
+});
+describe('_DocumentBrowser delete', () => {
+    beforeEach(() => { vi.clearAllMocks(); });
+    it('clicking Delete while a file is selected shows confirm overlay', async () => {
+        const handle = makeHandle();
+        const { container } = render(DocumentBrowser, { props: baseProps({ handle }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        await fireEvent.click(screen.getByText('a.md'));
+        const deleteBtn = container.querySelector('[title="Delete"]');
+        await fireEvent.click(deleteBtn);
+        expect(container.querySelector('.sh3-confirm-delete')).not.toBeNull();
+    });
+    it('confirming delete calls handle.delete', async () => {
+        const handle = makeHandle();
+        const { container } = render(DocumentBrowser, { props: baseProps({ handle }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        await fireEvent.click(screen.getByText('a.md'));
+        const deleteBtn = container.querySelector('[title="Delete"]');
+        await fireEvent.click(deleteBtn);
+        const confirmBtn = container.querySelector('.sh3-confirm-delete__btn--danger');
+        await fireEvent.click(confirmBtn);
+        expect(handle.delete).toHaveBeenCalledWith('sh1', 'a.md');
+    });
+    it('cancelling delete hides the overlay without calling delete', async () => {
+        const handle = makeHandle();
+        const { container } = render(DocumentBrowser, { props: baseProps({ handle }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        await fireEvent.click(screen.getByText('a.md'));
+        const deleteBtn = container.querySelector('[title="Delete"]');
+        await fireEvent.click(deleteBtn);
+        const cancelBtn = container.querySelector('.sh3-confirm-delete__btn:not(.sh3-confirm-delete__btn--danger)');
+        await fireEvent.click(cancelBtn);
+        expect(handle.delete).not.toHaveBeenCalled();
+        expect(container.querySelector('.sh3-confirm-delete')).toBeNull();
+    });
+});
+describe('_DocumentBrowser cut and paste', () => {
+    beforeEach(() => { vi.clearAllMocks(); });
+    it('Paste button is disabled when clipboard is empty', async () => {
+        const handle = makeHandle();
+        const { container } = render(DocumentBrowser, { props: baseProps({ handle }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        const pasteBtn = container.querySelector('[title="Paste"]');
+        expect(pasteBtn.disabled).toBe(true);
+    });
+    it('Cut then Paste calls handle.rename with new path', async () => {
+        const handle = makeHandle();
+        const { container } = render(DocumentBrowser, { props: baseProps({ handle }) });
+        await fireEvent.click(screen.getByText('sh1'));
+        await fireEvent.click(screen.getByText('a.md'));
+        const cutBtn = container.querySelector('[title="Cut"]');
+        await fireEvent.click(cutBtn);
+        // Navigate into sub folder (dblclick)
+        await fireEvent.dblClick(screen.getByText('sub'));
+        const pasteBtn = container.querySelector('[title="Paste"]');
+        expect(pasteBtn.disabled).toBe(false);
+        await fireEvent.click(pasteBtn);
+        expect(handle.rename).toHaveBeenCalledWith('sh1', 'a.md', 'sub/a.md');
+    });
+});
+describe('_DocumentBrowser save mode', () => {
+    it('shows filename input when inside a shard in save mode', async () => {
+        const { container } = render(DocumentBrowser, {
+            props: Object.assign(Object.assign({}, baseProps()), { mode: 'save' }),
+        });
+        await fireEvent.click(screen.getByText('sh1'));
+        expect(container.querySelector('.sh3-doc-browser__save-input')).not.toBeNull();
+    });
+    it('clicking a file in save mode populates the filename field', async () => {
+        const { container } = render(DocumentBrowser, {
+            props: Object.assign(Object.assign({}, baseProps()), { mode: 'save' }),
+        });
+        await fireEvent.click(screen.getByText('sh1'));
+        await fireEvent.click(screen.getByText('a.md'));
+        const input = container.querySelector('.sh3-doc-browser__save-input');
+        expect(input.value).toBe('a.md');
+    });
+    it('Save commits the typed path', async () => {
+        const onCommit = vi.fn();
+        const close = vi.fn();
+        const { container } = render(DocumentBrowser, {
+            props: Object.assign(Object.assign({}, baseProps({ onCommit, close })), { mode: 'save' }),
+        });
+        await fireEvent.click(screen.getByText('sh1'));
+        const input = container.querySelector('.sh3-doc-browser__save-input');
+        await fireEvent.input(input, { target: { value: 'report.txt' } });
+        await fireEvent.click(screen.getByText('Save'));
+        expect(onCommit).toHaveBeenCalledWith('sh1/report.txt');
+        expect(close).toHaveBeenCalled();
+    });
+});

package/dist/primitives/widgets/_FolderConfirmDelete.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  let {
+    item,
+    childCount,
+    onConfirm,
+    onCancel,
+  }: {
+    item: { kind: 'file' | 'folder'; name: string };
+    childCount: number;
+    onConfirm: () => void;
+    onCancel: () => void;
+  } = $props();
+</script>
+
+<div class="sh3-confirm-delete">
+  <div class="sh3-confirm-delete__title">
+    {#if item.kind === 'file'}
+      Delete "{item.name}"?
+    {:else if childCount === 0}
+      Delete folder "{item.name}"?
+    {:else}
+      Delete folder "{item.name}" and {childCount} item{childCount === 1 ? '' : 's'}?
+    {/if}
+  </div>
+  <div class="sh3-confirm-delete__buttons">
+    <button type="button" class="sh3-confirm-delete__btn" onclick={onCancel}>Cancel</button>
+    <button type="button" class="sh3-confirm-delete__btn sh3-confirm-delete__btn--danger" onclick={onConfirm}>Delete</button>
+  </div>
+</div>
+
+<style>
+  .sh3-confirm-delete {
+    padding: 12px 16px;
+    min-width: 240px;
+    color: var(--sh3-fg);
+    font-size: 0.8125rem;
+  }
+  .sh3-confirm-delete__title { font-size: 0.875rem; margin-bottom: 12px; }
+  .sh3-confirm-delete__buttons { display: flex; justify-content: flex-end; gap: 8px; }
+  .sh3-confirm-delete__btn {
+    display: inline-flex; align-items: center;
+    height: 26px; padding: 0 12px;
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-radius-sm);
+    background: var(--sh3-bg-elevated);
+    color: var(--sh3-fg);
+    font: inherit; font-size: 0.75rem;
+    cursor: pointer;
+  }
+  .sh3-confirm-delete__btn:hover { background: var(--sh3-bg); }
+  .sh3-confirm-delete__btn--danger {
+    background: var(--sh3-error);
+    color: var(--sh3-fg-on-error);
+    border-color: var(--sh3-error);
+  }
+  .sh3-confirm-delete__btn--danger:hover { filter: brightness(1.1); }
+</style>

package/dist/primitives/widgets/_FolderConfirmDelete.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    item: {
+        kind: 'file' | 'folder';
+        name: string;
+    };
+    childCount: number;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+declare const FolderConfirmDelete: import("svelte").Component<$$ComponentProps, {}, "">;
+type FolderConfirmDelete = ReturnType<typeof FolderConfirmDelete>;
+export default FolderConfirmDelete;

package/dist/projects-shard/DeleteProjectDialog.svelte

@@ -112,7 +112,38 @@
     color: var(--sh3-fg);
     cursor: pointer;
   }
-  .delete-project-dialog__opt input { margin-top: 3px; }
+  .delete-project-dialog__opt input[type='checkbox'] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    margin-top: 3px;
+    border: 1px solid var(--sh3-border);
+    border-radius: 3px;
+    background: var(--sh3-bg-elevated);
+    cursor: pointer;
+    flex-shrink: 0;
+    position: relative;
+  }
+  .delete-project-dialog__opt input[type='checkbox']:checked {
+    background: var(--sh3-accent);
+    border-color: var(--sh3-accent);
+  }
+  .delete-project-dialog__opt input[type='checkbox']:checked::after {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 1px;
+    width: 6px;
+    height: 10px;
+    border: solid #fff;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+  .delete-project-dialog__opt input[type='checkbox']:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
   .delete-project-dialog__path {
     display: block;
     font-family: var(--sh3-font-mono, monospace);

package/dist/projects-shard/ProjectManage.svelte

@@ -14,8 +14,16 @@
   import { getUser } from '../auth/auth.svelte';
   import AppPicker from '../primitives/widgets/AppPicker.svelte';
   import UserPicker from '../primitives/widgets/UserPicker.svelte';
+  import TabbedPanel from '../primitives/TabbedPanel.svelte';
   import { modalManager } from '../overlays/modal';
   import DeleteProjectDialog from './DeleteProjectDialog.svelte';
+  import { apiFetch } from '../transport/apiFetch';
+
+  interface MountEntry {
+    id: string;
+    label?: string;
+    status: 'resolved' | 'unresolved' | 'error';
+  }
 
   interface Props {
     project?: ProjectRecord | null;
@@ -44,6 +52,36 @@
   );
   let saving = $state(false);
   let error = $state<string | null>(null);
+  let activeTab = $state(0);
+  let allMounts = $state<MountEntry[]>([]);
+  let mountAttached = $state<Set<string>>(new Set());
+  let mountsLoading = $state(true);
+  let mountsLoadError = $state<string | null>(null);
+  let baselineApps = $state<string[]>(untrack(() => (project ? [...project.appAllowlist] : [])));
+  let baselineMembers = $state<string[]>(
+    untrack(() => {
+      if (project) return [...project.members];
+      const userId = getUser()?.id;
+      return userId ? [userId] : [];
+    }),
+  );
+  let baselineMounts = $state<Set<string>>(new Set());
+
+  function arrayEq(a: string[], b: string[]): boolean {
+    if (a.length !== b.length) return false;
+    const sa = [...a].sort();
+    const sb = [...b].sort();
+    return sa.every((v, i) => v === sb[i]);
+  }
+  function setEq(a: Set<string>, b: Set<string>): boolean {
+    if (a.size !== b.size) return false;
+    for (const v of a) if (!b.has(v)) return false;
+    return true;
+  }
+
+  const appsDirty = $derived(!arrayEq(appAllowlist, baselineApps));
+  const membersDirty = $derived(!arrayEq(members, baselineMembers));
+  const mountsDirty = $derived(!setEq(mountAttached, baselineMounts));
 
   async function save() {
     if (!name.trim()) {
@@ -59,11 +97,49 @@
       appAllowlist,
     };
     try {
-      if (isEdit && project) {
-        await projectsApi.update(project.id, payload);
-      } else {
-        await projectsApi.create(payload);
+      const saved = isEdit && project
+        ? await projectsApi.update(project.id, payload)
+        : await projectsApi.create(payload);
+
+      const projectId = saved.id;
+      const toAttach: string[] = [];
+      const toDetach: string[] = [];
+      for (const id of mountAttached) if (!baselineMounts.has(id)) toAttach.push(id);
+      for (const id of baselineMounts) if (!mountAttached.has(id)) toDetach.push(id);
+
+      const errors: string[] = [];
+      for (const mountId of toAttach) {
+        try {
+          const res = await apiFetch('/api/admin/mount-attachments', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ mountId, tenantId: projectId }),
+          });
+          if (!res.ok) errors.push(`attach ${mountId}: ${res.status}`);
+        } catch (e) {
+          errors.push(`attach ${mountId}: ${(e as Error).message}`);
+        }
+      }
+      for (const mountId of toDetach) {
+        try {
+          const res = await apiFetch('/api/admin/mount-attachments', {
+            method: 'DELETE',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ mountId, tenantId: projectId }),
+          });
+          if (!res.ok && res.status !== 204) errors.push(`detach ${mountId}: ${res.status}`);
+        } catch (e) {
+          errors.push(`detach ${mountId}: ${(e as Error).message}`);
+        }
+      }
+      if (errors.length > 0) {
+        error = `Mount changes failed: ${errors.join('; ')}`;
+        baselineMounts = new Set(mountAttached);
+        await refreshProjects();
+        return;
       }
+
+      baselineMounts = new Set(mountAttached);
       await refreshProjects();
       onClose();
     } catch (e) {
@@ -94,10 +170,51 @@
       },
     });
   }
+
+  function toggleMount(mountId: string, checked: boolean): void {
+    const next = new Set(mountAttached);
+    if (checked) next.add(mountId);
+    else next.delete(mountId);
+    mountAttached = next;
+  }
+
+  async function loadMounts(): Promise<void> {
+    mountsLoading = true;
+    mountsLoadError = null;
+    try {
+      const reqs: Promise<Response>[] = [
+        apiFetch('/api/admin/mounts'),
+      ];
+      if (project) {
+        reqs.push(apiFetch(
+          `/api/admin/tenants/${encodeURIComponent(project.id)}/attachments`,
+        ));
+      }
+      const results = await Promise.all(reqs);
+      const mountsRes = results[0];
+      const attRes = results[1];
+
+      if (!mountsRes.ok) throw new Error(`GET /api/admin/mounts failed: ${mountsRes.status}`);
+      allMounts = await mountsRes.json() as MountEntry[];
+
+      if (attRes) {
+        if (!attRes.ok) throw new Error(`GET tenant attachments failed: ${attRes.status}`);
+        const atts = await attRes.json() as { mountId: string }[];
+        mountAttached = new Set(atts.map((a) => a.mountId));
+        baselineMounts = new Set(mountAttached);
+      }
+    } catch (e) {
+      mountsLoadError = (e as Error).message;
+    } finally {
+      mountsLoading = false;
+    }
+  }
+
+  loadMounts();
 </script>
 
 <div class="project-manage">
-  <div class="body">
+  <header class="header">
     <h2>{isEdit ? `Edit ${project!.name}` : 'Create Project'}</h2>
 
     {#if isEdit}
@@ -113,27 +230,22 @@
       <span>Description</span>
       <textarea bind:value={description} rows={2} disabled={saving}></textarea>
     </label>
+  </header>
 
-    <label class="field">
-      <span>Members</span>
-      <UserPicker bind:value={members} disabled={saving} />
-      {#if me}
-        <span class="hint">
-          Your id: <code>{me.id}</code> ({me.username ?? me.displayName})
-        </span>
-      {/if}
-    </label>
-
-    <label class="field">
-      <span>App allowlist</span>
-      <AppPicker bind:value={appAllowlist} disabled={saving} />
-    </label>
-
-    {#if error}
-      <p class="error">{error}</p>
-    {/if}
+  <div class="tabs">
+    <TabbedPanel
+      labels={['Apps', 'Users', 'Mounts']}
+      {activeTab}
+      onActiveChange={(i) => (activeTab = i)}
+      dirty={[appsDirty, membersDirty, mountsDirty]}
+      body={tabBody}
+    />
   </div>
 
+  {#if error}
+    <p class="error">{error}</p>
+  {/if}
+
   <div class="actions">
     <button type="button" class="primary" onclick={save} disabled={saving}>
       {isEdit ? 'Save' : 'Create'}
@@ -145,6 +257,54 @@
   </div>
 </div>
 
+{#snippet tabBody(i: number)}
+  <div class="tab-pane">
+    {#if i === 0}
+      <label class="field">
+        <span>App allowlist</span>
+        <AppPicker bind:value={appAllowlist} disabled={saving} />
+      </label>
+    {:else if i === 1}
+      <label class="field">
+        <span>Members</span>
+        <UserPicker bind:value={members} disabled={saving} />
+        {#if me}
+          <span class="hint">
+            Your id: <code>{me.id}</code> ({me.username ?? me.displayName})
+          </span>
+        {/if}
+      </label>
+    {:else}
+      {#if mountsLoading}
+        <p class="muted">Loading mounts...</p>
+      {:else if mountsLoadError}
+        <p class="error">{mountsLoadError}</p>
+      {:else if allMounts.length === 0}
+        <p class="muted">No mounts configured. Create mounts first.</p>
+      {:else}
+        <ul class="mount-list">
+          {#each allMounts as mount (mount.id)}
+            <li class="mount-row" data-mount-row={mount.id}>
+              <label>
+                <input
+                  class="sh3-base-check"
+                  type="checkbox"
+                  checked={mountAttached.has(mount.id)}
+                  disabled={saving}
+                  onchange={(e) => toggleMount(mount.id, (e.currentTarget as HTMLInputElement).checked)}
+                />
+                <span class="mount-status" data-status={mount.status}></span>
+                <span class="mount-label">{mount.label ?? mount.id}</span>
+                <span class="mount-id">{mount.id}</span>
+              </label>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    {/if}
+  </div>
+{/snippet}
+
 <style>
   .project-manage {
     position: absolute;
@@ -155,11 +315,20 @@
     color: var(--sh3-fg);
     background: var(--sh3-bg);
   }
-  .body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px 16px 8px;
-  }
+  .header { padding: 16px 16px 8px; flex: 0 0 auto; border-bottom: 1px solid var(--sh3-border); }
+  .tabs { flex: 1 1 auto; min-height: 0; position: relative; }
+  .tab-pane { padding: 16px; height: 100%; overflow-y: auto; box-sizing: border-box; }
+  .muted { color: var(--sh3-fg-muted); font-style: italic; font-size: 13px; }
+  .mount-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
+  .mount-row { padding: 6px 0; border-bottom: 1px solid var(--sh3-border); font-size: 13px; }
+  .mount-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
+  .mount-row input[type="checkbox"] { cursor: pointer; }
+  .mount-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #999; }
+  .mount-status[data-status="resolved"] { background: #4caf50; }
+  .mount-status[data-status="unresolved"] { background: #ff9800; }
+  .mount-status[data-status="error"] { background: #f44336; }
+  .mount-label { font-weight: 500; }
+  .mount-id { font-size: 11px; color: var(--sh3-fg-muted); font-family: var(--sh3-font-mono, monospace); margin-left: auto; }
   h2 { margin: 0 0 8px; font-size: 16px; }
   .project-id { font-size: 12px; color: var(--sh3-fg-muted); margin: 0 0 16px; }
   .project-id code { font-family: var(--sh3-font-mono, monospace); }

package/dist/projects-shard/ProjectManage.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};