Fix v3 config persistence; add tabbed workspace UI

[Aleel101]

---

Summary

This PR introduces a targeted config persistence fix alongside a cohesive desktop UX refinement built on the existing workspace model.

• Base: 6 commits on Aleel101/main (e.g. 88046c2) vs OpenCoworkAI/upstream/main
• Compare: git fetch upstream && git log upstream/main..HEAD or git diff upstream/main...HEAD

---

Key Changes

Config Persistence Fix (v3 optionals)

Fixes an issue where optional v3 config fields (modelFast, imageGeneration, designSystem) could be unintentionally dropped during partial config writes.

• Introduces preservedV3OptionalsForWrite in shared config
• Threads preservation through all write paths (onboarding, OAuth, image generation, etc.)
• Ensures unrelated config updates no longer remove optional fields
• Includes changeset: .changeset/persist-fast-model-v3.md

---

Desktop UX and Workspace Model

Refines how existing features are organized and presented rather than introducing entirely new surfaces.

• Tabbed canvas: Files · History · Code are now first-class tabs
• Layout updates:
  • Custom top window bar
  • Language/theme controls moved to Settings (removed from main chrome)
• Interaction improvements:
  • Model switcher (search and layout improvements)
  • Chat “thinking” and turn affordances
  • Todos as a fixed top region with show/hide behavior

Note: Console and History views already existed. This PR focuses on integrating them into the tabbed layout and improving UX consistency.

---

Type of Change

• Bug fix — preserves v3 optional config fields across writes
• Feature — tabbed workspace model and UX improvements
• Refactor — layout, model switcher, chat/todo presentation
• Tooling — lint, types, tests, lockfile alignment
• Breaking (minor UX) — language/theme controls moved to Settings

---

Checklist

• pnpm lint, typecheck, and test pass locally
• Tests updated where config, store, or preview logic changed
• Changeset included for config and UX updates
• Docs updated if aligning public-facing behavior

---

Dependencies

No new product dependencies. Any package.json or lockfile changes are version alignment only.

---

Screenshots

• Custom window chrome (top bar, no inline theme/language controls)
• Tabbed canvas (Files · History · Code)
• Todos fixed top region (toggle visibility)
• Model switcher improvements
• Chat affordances
• Console and History within tabbed layout

(See attached images)

---

---

---

---

---

p.s. Do what ya like, just fixed some things that were annoying me and thought some people may like these changes as well.

[github-actions]

Findings

• [Major] Fast-model loading can get stuck forever or fail silently when provider model discovery fails — apps/desktop/src/renderer/src/components/Settings.tsx:2041, apps/desktop/src/renderer/src/components/Settings.tsx:2260. listForProvider() is only handled in .then(...): a rejected IPC/network call never clears listLoading, and an { ok: false } response quietly downgrades the UI to an empty/manual state with no error surfaced.
  Suggested fix:

  void window.codesign.models
    .listForProvider(config.provider)
    .then((res) => {
      if (cancelled) return;
      setListLoading(false);
      if (res.ok) {
        setAvailableModels(res.models);
        return;
      }
      setAvailableModels([]);
      pushToast({
        variant: 'error',
        title: t('settings.modelRouting.saveFailed'),
        description: res.message,
      });
    })
    .catch((err) => {
      if (cancelled) return;
      setListLoading(false);
      setAvailableModels([]);
      pushToast({
        variant: 'error',
        title: t('settings.modelRouting.saveFailed'),
        description: cleanIpcError(err) || t('settings.common.unknownError'),
      });
    });

• [Major] Restoring a snapshot updates the preview HTML but leaves comment filtering on the old snapshot — apps/desktop/src/renderer/src/components/HistoryPanel.tsx:53, apps/desktop/src/renderer/src/components/HistoryPanel.tsx:61, with the stale filter applied in apps/desktop/src/renderer/src/components/PreviewPane.tsx:405 and apps/desktop/src/renderer/src/components/PreviewPane.tsx:507. The new snapshot returned by snapshots.create() is ignored, so currentSnapshotId is never refreshed and pins/comments can belong to the previous version after restore.
  Suggested fix:

  const loadCommentsForCurrentDesign = useCodesignStore((s) => s.loadCommentsForCurrentDesign);
  
  const restored = await window.codesign.snapshots.create({
    designId: currentDesignId,
    parentId: selected.id,
    type: 'fork',
    prompt: selected.prompt,
    artifactType: selected.artifactType,
    artifactSource: selected.artifactSource,
  });
  setPreviewHtml(restored.artifactSource);
  await loadCommentsForCurrentDesign();

• [Minor] The new console panel bypasses the shared token system with raw colors and a hardcoded mono stack — apps/desktop/src/renderer/src/components/ConsolePanel.tsx:9, apps/desktop/src/renderer/src/components/ConsolePanel.tsx:18, apps/desktop/src/renderer/src/components/ConsolePanel.tsx:28, apps/desktop/src/renderer/src/components/ConsolePanel.tsx:81. This conflicts with the app-chrome rule to route UI values through packages/ui tokens.
  Suggested fix:

  const LEVEL_BG: Record<ConsoleLevel, string> = {
    log: '',
    info: '',
    warn: 'bg-[color-mix(in_srgb,var(--color-warning)_6%,transparent)]',
    error: 'bg-[color-mix(in_srgb,var(--color-error)_6%,transparent)]',
    debug: '',
  };
  
  <div className="... font-[var(--font-mono)] ..." />
  <span className="... bg-[var(--color-warning)] text-[var(--color-on-accent)] ..." />

Summary

• Review mode: initial. Three issues found: the fast-model loader has an unhandled failure path, snapshot restore does not resync snapshot-scoped comments, and the new console UI reintroduces raw app-chrome values instead of packages/ui tokens.
• Residual risk: I did not find coverage for the fast-model discovery failure path or for history-restore snapshot/comment synchronization.

Testing

• Not run (automation)

open-codesign Bot

[github-actions]

This listForProvider() call needs a failure path. Right now a rejected IPC/network call never clears listLoading, and an { ok: false } response silently degrades into an empty/manual model picker instead of surfacing the error.

Suggested fix:

void window.codesign.models
  .listForProvider(config.provider)
  .then((res) => {
    if (cancelled) return;
    setListLoading(false);
    if (res.ok) {
      setAvailableModels(res.models);
      return;
    }
    setAvailableModels([]);
    pushToast({
      variant: 'error',
      title: t('settings.modelRouting.saveFailed'),
      description: res.message,
    });
  })
  .catch((err) => {
    if (cancelled) return;
    setListLoading(false);
    setAvailableModels([]);
    pushToast({
      variant: 'error',
      title: t('settings.modelRouting.saveFailed'),
      description: cleanIpcError(err) || t('settings.common.unknownError'),
    });
  });

[github-actions]

The restore path creates a new snapshot but never refreshes currentSnapshotId, so PreviewPane and CommentsPanel keep filtering pins/comments against the previous snapshot while the HTML switches to the restored version.

Suggested fix:

const loadCommentsForCurrentDesign = useCodesignStore((s) => s.loadCommentsForCurrentDesign);

const restored = await window.codesign.snapshots.create({
  designId: currentDesignId,
  parentId: selected.id,
  type: 'fork',
  prompt: selected.prompt,
  artifactType: selected.artifactType,
  artifactSource: selected.artifactSource,
});
setPreviewHtml(restored.artifactSource);
await loadCommentsForCurrentDesign();

[github-actions]

This new panel reintroduces raw app-chrome values (#f59e0b, #3b82f6, ui-monospace,Menlo,monospace) instead of going through packages/ui tokens, which conflicts with the repo's token-only UI rule.

Suggested fix:

const LEVEL_BG: Record<ConsoleLevel, string> = {
  log: '',
  info: '',
  warn: 'bg-[color-mix(in_srgb,var(--color-warning)_6%,transparent)]',
  error: 'bg-[color-mix(in_srgb,var(--color-error)_6%,transparent)]',
  debug: '',
};

<div className="... font-[var(--font-mono)] ..." />
<span className="... bg-[var(--color-warning)] text-[var(--color-on-accent)] ..." />

[github-actions]

Findings

• [Major] History-load failures are still swallowed and rendered as an empty history state — apps/desktop/src/renderer/src/components/HistoryPanel.tsx:33, apps/desktop/src/renderer/src/components/HistoryPanel.tsx:42, apps/desktop/src/renderer/src/components/HistoryPanel.tsx:105. The new History view still catches window.codesign.snapshots.list() with an empty handler, clears loading in finally, and then falls through to the No history yet. branch. If the snapshots IPC or DB read fails, users lose access to history and get misleading UI instead of an actionable error.
  Suggested fix:

  const [loadError, setLoadError] = useState<string | null>(null);
  
  window.codesign.snapshots
    .list(currentDesignId)
    .then((rows) => {
      setLoadError(null);
      setSnapshots(rows);
      setSelected(rows[0] ?? null);
    })
    .catch((err) => {
      const message = err instanceof Error ? err.message : String(err);
      setLoadError(message);
      pushToast({
        variant: 'error',
        title: 'Failed to load history',
        description: message,
      });
    })
    .finally(() => setLoading(false));

• [Minor] Monaco/TextMate bootstrap failures are still unhandled — apps/desktop/src/renderer/src/components/PreviewPane.tsx:922, apps/desktop/src/renderer/src/lib/setupMonacoTextmate.ts:35. If one of the lazy imports or createHighlighter() fails, the rejection only lands in the console; the Code tab never surfaces why editor setup failed, which violates the repo's no-silent-fallback rule.
  Suggested fix:

  const pushToast = useCodesignStore((s) => s.pushToast);
  
  setupTextmateGrammars(monaco)
    .then(() => {
      monaco.editor.setTheme(resolvedThemeRef.current);
    })
    .catch((err) => {
      pushToast({
        variant: 'error',
        title: 'Editor setup failed',
        description: err instanceof Error ? err.message : String(err),
      });
    });

Summary

• Review mode: follow-up after new commits. Two issues remain on the current head: the History tab still hides snapshot-load failures behind an empty-state fallback, and the new Monaco/Shiki bootstrap path still has an unreported failure mode.
• Residual risk: I did not find coverage for the history-load error path or for Monaco/TextMate bootstrap failures.

Testing

• Not run (automation)

open-codesign Bot

[github-actions]

This still swallows snapshots.list() failures and then falls through to the No history yet. empty state once finally clears loading. That is both a misleading UX regression and a direct violation of the repo's no-silent-fallback rule.

Suggested fix:

const [loadError, setLoadError] = useState<string | null>(null);

window.codesign.snapshots
  .list(currentDesignId)
  .then((rows) => {
    setLoadError(null);
    setSnapshots(rows);
    setSelected(rows[0] ?? null);
  })
  .catch((err) => {
    const message = err instanceof Error ? err.message : String(err);
    setLoadError(message);
    pushToast({
      variant: 'error',
      title: 'Failed to load history',
      description: message,
    });
  })
  .finally(() => setLoading(false));

[github-actions]

setupTextmateGrammars() is now on the critical path for the Code tab, but this call still has no failure handling. If the lazy Shiki/Monaco import or createHighlighter() rejects, the user only gets a console rejection and no surfaced error, which conflicts with the repo's no-silent-fallback rule.

Suggested fix:

const pushToast = useCodesignStore((s) => s.pushToast);

setupTextmateGrammars(monaco)
  .then(() => {
    monaco.editor.setTheme(resolvedThemeRef.current);
  })
  .catch((err) => {
    pushToast({
      variant: 'error',
      title: 'Editor setup failed',
      description: err instanceof Error ? err.message : String(err),
    });
  });