feat(desktop): workspace for each design projects (#173)

## Summary
- Adds a `NewDesignDialog` modal that appears whenever the user clicks
"New Design" (Recent tab, Design Switcher, Designs view)
- The dialog lets the user pick a workspace folder via the native file
picker, shows the chosen path, and offers a "Change" button
- Skipping is allowed; "Skip" creates the design without a bound
workspace
- Workspace scope is per-design only

## Type of change
- [x] New feature

## Linked issue
close #133 

## Checklist

- [x] I read [`docs/VISION.md`](../docs/VISION.md),
[`docs/PRINCIPLES.md`](../docs/PRINCIPLES.md), and
[`CLAUDE.md`](../CLAUDE.md) before starting
- [x] Commits are signed with DCO (`git commit -s`)
- [x] `pnpm lint && pnpm typecheck && pnpm test` passes locally
- [x] Added/updated tests for the change
- [x] Added a changeset (`pnpm changeset`) if user-visible
- [x] Updated docs if behavior changed

## Changes
- `store.ts` — new `newDesignDialogOpen` state + open/close actions;
`createNewDesign` now accepts optional `workspacePath`
- `NewDesignDialog.tsx` — new modal component (created)
- `App.tsx` — mounts `<NewDesignDialog />`
- `RecentTab.tsx`, `DesignSwitcher.tsx`, `DesignsView.tsx` — call
`openNewDesignDialog()` instead of `createNewDesign` directly
- `FilesTabView.tsx` — WorkspaceSection single-row layout,
fire-and-forget bug fixed
- `en.json` / `zh-CN.json` — new `canvas.newDesignDialog.*` i18n keys
- `snapshots-db.ts` — pre-existing `getLogger()` missing-scope fix
- `FilesPanel.test.tsx` — pre-existing lint/type errors fixed

## Screenshots / recordings (UI changes)
<img width="1918" height="1006" alt="image"
src="https://github.com/user-attachments/assets/c91a862d-89a4-4373-9e93-344ce148e0f5"
/>
<img width="1920" height="1026" alt="image"
src="https://github.com/user-attachments/assets/5eebab71-6472-4b1b-963a-eec79378be63"
/>
<img width="1920" height="1020" alt="image"
src="https://github.com/user-attachments/assets/ecd8b373-144e-43a1-88a7-2f3751b1d136"
/>

---------

Signed-off-by: roy1994 <dev.mancitrus@outlook.com>
Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

Author: MoveCloudROY

.changeset/feat-user-choose-workspace.md

@@ -0,0 +1,13 @@
+---
+'@open-codesign/desktop': minor
+---
+
+feat(desktop): per-design workspace folder linking
+
+Users can now bind any open design to a local folder directly from the Files panel. Every file the agent writes is mirrored to that folder in real time, and the binding persists across restarts.
+
+- **Bind on first use** — click "Choose folder" in the Files panel to pick a workspace directory; the design is linked immediately and files are synced.
+- **Rebind with migration** — choosing a different folder prompts a confirmation dialog; existing tracked files are copied to the new location before the binding switches.
+- **Clear binding** — a "Disconnect folder" action removes the link without touching files on disk.
+- **Error surfacing** — write-through failures and IPC errors (migration collision, missing tracked file) are now reported to the UI instead of being silently swallowed.
+- **Cross-platform path comparison** — the rebind dialog no longer triggers falsely when paths differ only by trailing slash or directory-separator style.

apps/desktop/src/main/design-files.test.ts

@@ -14,6 +14,7 @@ import {
   listDesignFilesInDir,
   normalizeDesignFilePath,
   strReplaceInDesignFile,
+  upsertDesignFile,
   viewDesignFile,
 } from './snapshots-db';
 
@@ -100,6 +101,30 @@ describe('insert', () => {
   });
 });
 
+describe('upsert', () => {
+  it('creates a missing design file', () => {
+    const { db, designId } = seed();
+
+    const file = upsertDesignFile(db, designId, 'nested\\index.html', '<main>first</main>');
+
+    expect(file.path).toBe('nested/index.html');
+    expect(file.content).toBe('<main>first</main>');
+    expect(viewDesignFile(db, designId, 'nested/index.html')?.content).toBe('<main>first</main>');
+  });
+
+  it('updates an existing design file in place', () => {
+    const { db, designId } = seed();
+    const created = createDesignFile(db, designId, 'index.html', '<main>before</main>');
+
+    const updated = upsertDesignFile(db, designId, 'index.html', '<main>after</main>');
+
+    expect(updated.id).toBe(created.id);
+    expect(updated.content).toBe('<main>after</main>');
+    expect(updated.updatedAt >= created.updatedAt).toBe(true);
+    expect(viewDesignFile(db, designId, 'index.html')?.content).toBe('<main>after</main>');
+  });
+});
+
 describe('list', () => {
   it('lists files by design', () => {
     const { db, designId } = seed();

apps/desktop/src/main/design-workspace.test.ts

@@ -0,0 +1,242 @@
+import { mkdir, mkdtemp, readFile, readdir, rm, stat, writeFile } from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  createDesign,
+  createDesignFile,
+  initInMemoryDb,
+  updateDesignWorkspace,
+} from './snapshots-db';
+
+vi.mock('electron', () => ({
+  dialog: {
+    showOpenDialog: vi.fn(),
+  },
+  shell: {
+    openPath: vi.fn(),
+  },
+}));
+
+import { dialog, shell } from 'electron';
+import {
+  bindWorkspace,
+  normalizeWorkspacePath,
+  openWorkspaceFolder,
+  pickWorkspaceFolder,
+} from './design-workspace';
+
+const showOpenDialog = vi.mocked(dialog.showOpenDialog);
+const openPath = vi.mocked(shell.openPath);
+
+const tempDirs: string[] = [];
+
+async function withMockedPlatform<T>(platform: NodeJS.Platform, run: () => Promise<T>): Promise<T> {
+  const original = Object.getOwnPropertyDescriptor(process, 'platform');
+  Object.defineProperty(process, 'platform', {
+    value: platform,
+    configurable: true,
+  });
+  try {
+    return await run();
+  } finally {
+    if (original) {
+      Object.defineProperty(process, 'platform', original);
+    }
+  }
+}
+
+async function makeTempDir(prefix: string): Promise<string> {
+  const dir = await mkdtemp(path.join(os.tmpdir(), prefix));
+  tempDirs.push(dir);
+  return dir;
+}
+
+async function writeWorkspaceFile(
+  root: string,
+  relativePath: string,
+  content: string,
+): Promise<void> {
+  const filePath = path.join(root, relativePath);
+  await mkdir(path.dirname(filePath), { recursive: true });
+  await writeFile(filePath, content, 'utf8');
+}
+
+afterEach(async () => {
+  showOpenDialog.mockReset();
+  openPath.mockReset();
+  await Promise.all(tempDirs.splice(0).map((dir) => rm(dir, { recursive: true, force: true })));
+});
+
+describe('normalizeWorkspacePath', () => {
+  it('strips trailing slash, resolves absolute path, and normalizes separators', () => {
+    const relative = path.join('tmp', 'designs', '..', 'designs', 'workspace') + path.sep;
+    const normalized = normalizeWorkspacePath(relative);
+
+    expect(path.isAbsolute(normalized)).toBe(true);
+    expect(normalized).toBe(path.resolve('tmp/designs/workspace').replaceAll('\\', '/'));
+    expect(normalized.endsWith('/')).toBe(false);
+  });
+});
+
+describe('pickWorkspaceFolder', () => {
+  it('returns the selected folder path', async () => {
+    showOpenDialog.mockResolvedValue({
+      canceled: false,
+      filePaths: ['/tmp/workspace'],
+    } as Awaited<ReturnType<typeof dialog.showOpenDialog>>);
+
+    await expect(pickWorkspaceFolder({} as never)).resolves.toBe('/tmp/workspace');
+  });
+
+  it('returns null when the picker is canceled', async () => {
+    showOpenDialog.mockResolvedValue({
+      canceled: true,
+      filePaths: [],
+    } as Awaited<ReturnType<typeof dialog.showOpenDialog>>);
+
+    await expect(pickWorkspaceFolder({} as never)).resolves.toBeNull();
+  });
+});
+
+describe('openWorkspaceFolder', () => {
+  it('opens the folder in the OS file manager', async () => {
+    openPath.mockResolvedValue('');
+
+    await expect(openWorkspaceFolder('/tmp/workspace')).resolves.toBeUndefined();
+    expect(openPath).toHaveBeenCalledWith('/tmp/workspace');
+  });
+
+  it('throws when Electron reports an open error', async () => {
+    openPath.mockResolvedValue('no application is associated');
+
+    await expect(openWorkspaceFolder('/tmp/workspace')).rejects.toThrow(
+      'Failed to open workspace folder: no application is associated',
+    );
+  });
+});
+
+describe('bindWorkspace', () => {
+  it('returns the current design unchanged when rebinding the same normalized path', async () => {
+    const db = initInMemoryDb();
+    const design = createDesign(db);
+    const workspace = await makeTempDir('ocd-ws-same-');
+    const normalized = normalizeWorkspacePath(workspace);
+    const bound = updateDesignWorkspace(db, design.id, normalized);
+    await writeWorkspaceFile(workspace, 'tracked.txt', 'tracked');
+    createDesignFile(db, design.id, 'tracked.txt', 'tracked');
+    const destinationBefore = await stat(path.join(workspace, 'tracked.txt'));
+
+    const rebound = await bindWorkspace(db, design.id, `${workspace}${path.sep}`, true);
+
+    expect(rebound).toEqual(bound);
+    expect(await stat(path.join(workspace, 'tracked.txt'))).toEqual(destinationBefore);
+  });
+
+  it('throws when another active design already owns the workspace path', async () => {
+    const db = initInMemoryDb();
+    const design = createDesign(db);
+    const otherDesign = createDesign(db);
+    const conflictPath = normalizeWorkspacePath(await makeTempDir('ocd-ws-conflict-'));
+    updateDesignWorkspace(db, otherDesign.id, conflictPath);
+
+    await expect(bindWorkspace(db, design.id, conflictPath, false)).rejects.toThrow(
+      'Workspace path is already bound to another design',
+    );
+    expect(db.prepare('SELECT workspace_path FROM designs WHERE id = ?').get(design.id)).toEqual({
+      workspace_path: null,
+    });
+  });
+
+  it('treats case-only workspace differences as the same path on Windows for the same design', async () => {
+    await withMockedPlatform('win32', async () => {
+      const db = initInMemoryDb();
+      const design = createDesign(db);
+      const storedPath = normalizeWorkspacePath('/Users/Roy/Workspace');
+      updateDesignWorkspace(db, design.id, storedPath);
+
+      const rebound = await bindWorkspace(db, design.id, '/users/roy/workspace/', false);
+
+      expect(rebound.workspacePath).toBe(storedPath);
+      expect(db.prepare('SELECT workspace_path FROM designs WHERE id = ?').get(design.id)).toEqual({
+        workspace_path: storedPath,
+      });
+    });
+  });
+
+  it('treats case-only workspace differences as conflicts on Windows across designs', async () => {
+    await withMockedPlatform('win32', async () => {
+      const db = initInMemoryDb();
+      const design = createDesign(db);
+      const otherDesign = createDesign(db);
+      updateDesignWorkspace(db, otherDesign.id, normalizeWorkspacePath('/Users/Roy/Workspace'));
+
+      await expect(bindWorkspace(db, design.id, '/users/roy/workspace', false)).rejects.toThrow(
+        'Workspace path is already bound to another design',
+      );
+    });
+  });
+
+  it('copies tracked files only during migration', async () => {
+    const db = initInMemoryDb();
+    const design = createDesign(db);
+    const source = await makeTempDir('ocd-ws-source-');
+    const destination = await makeTempDir('ocd-ws-dest-');
+    updateDesignWorkspace(db, design.id, normalizeWorkspacePath(source));
+    createDesignFile(db, design.id, 'tracked.txt', 'tracked root');
+    createDesignFile(db, design.id, 'nested/child.txt', 'tracked nested');
+    await writeWorkspaceFile(source, 'tracked.txt', 'tracked root');
+    await writeWorkspaceFile(source, 'nested/child.txt', 'tracked nested');
+    await writeWorkspaceFile(source, 'ignored.txt', 'untracked');
+
+    const updated = await bindWorkspace(db, design.id, destination, true);
+
+    expect(updated.workspacePath).toBe(normalizeWorkspacePath(destination));
+    expect(await readFile(path.join(destination, 'tracked.txt'), 'utf8')).toBe('tracked root');
+    expect(await readFile(path.join(destination, 'nested/child.txt'), 'utf8')).toBe(
+      'tracked nested',
+    );
+    await expect(readFile(path.join(destination, 'ignored.txt'), 'utf8')).rejects.toMatchObject({
+      code: 'ENOENT',
+    });
+    expect(await readFile(path.join(source, 'tracked.txt'), 'utf8')).toBe('tracked root');
+    expect(await readFile(path.join(source, 'ignored.txt'), 'utf8')).toBe('untracked');
+  });
+
+  it('aborts migration on destination collision and leaves the binding unchanged', async () => {
+    const db = initInMemoryDb();
+    const design = createDesign(db);
+    const source = await makeTempDir('ocd-ws-source-');
+    const destination = await makeTempDir('ocd-ws-dest-');
+    const sourcePath = normalizeWorkspacePath(source);
+    updateDesignWorkspace(db, design.id, sourcePath);
+    createDesignFile(db, design.id, 'tracked.txt', 'tracked root');
+    await writeWorkspaceFile(source, 'tracked.txt', 'tracked root');
+    await writeWorkspaceFile(destination, 'tracked.txt', 'existing destination');
+
+    await expect(bindWorkspace(db, design.id, destination, true)).rejects.toThrow(
+      'Workspace migration collision: tracked.txt',
+    );
+    expect(db.prepare('SELECT workspace_path FROM designs WHERE id = ?').get(design.id)).toEqual({
+      workspace_path: sourcePath,
+    });
+    expect(await readFile(path.join(destination, 'tracked.txt'), 'utf8')).toBe(
+      'existing destination',
+    );
+  });
+
+  it('clears the workspace binding without touching the filesystem', async () => {
+    const db = initInMemoryDb();
+    const design = createDesign(db);
+    const source = await makeTempDir('ocd-ws-clear-');
+    const normalizedSource = normalizeWorkspacePath(source);
+    updateDesignWorkspace(db, design.id, normalizedSource);
+    await writeWorkspaceFile(source, 'tracked.txt', 'tracked root');
+    const beforeEntries = await readdir(source);
+
+    const cleared = await bindWorkspace(db, design.id, null, false);
+
+    expect(cleared.workspacePath).toBeNull();
+    expect(await readdir(source)).toEqual(beforeEntries);
+  });
+});