feat(workspace): panel-preset switcher over Dockview

[jerelvelarde]

A segmented switcher fronting the Dockview workspace with named one-click layout presets, on top of the existing freeform Dockview.

What

• Three presets — Chat, Chat + Preview (new render-focused default), Code & Engine (full JSON editor + data/engine panels).
• applyPreset() clears and rebuilds Dockview per preset; freeform drag-and-save (composer_dockview_layout) is preserved untouched.
• New composer_workspace_preset key drives the toggle highlight.
• Files: composer-workspace.{ts,ng.html,scss,spec.ts}.

Why

Fast, named layout arrangements while keeping the freeform Dockview underneath.

Testing

Workspace unit spec passing; ng build clean.

Notes

Styles reference the theme PR's --cpk-* tokens and fall back to Material without it — functionally standalone.

---

Contributed by CopilotKit.

Screenshots

The layout toggle lives in the header (single cycle button through Chat / Chat + Preview / Code & Engine):

Light	Dark

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[gemini-code-assist]

Code Review

This pull request introduces workspace layout presets ('chat', 'chat-preview', and 'full') to the ComposerWorkspace component, allowing users to toggle between different panel configurations. It also updates the workspace styles to align with the CopilotKit token palette and adds comprehensive unit tests for the new presets. The feedback suggests wrapping localStorage operations in try-catch blocks to prevent runtime errors in restricted environments, refactoring the preset selection logic to use a safer switch statement, and cleaning up the now-obsolete extension-mode class and isExtension signal.

[gemini-code-assist]

Accessing localStorage can throw a SecurityError or DOMException in environments where storage access is restricted (e.g., third-party iframe sandboxes or when cookies/local storage are disabled by the user). Wrapping the localStorage.getItem call in a try-catch block ensures the component initializes safely without crashing.

    try {
      const savedPreset = localStorage.getItem(WORKSPACE_PRESET_KEY);
      if (savedPreset === 'chat' || savedPreset === 'chat-preview' || savedPreset === 'full') {
        this.activePreset.set(savedPreset);
      }
    } catch (e) {
      console.warn('Failed to read workspace preset from localStorage', e);
    }

[gemini-code-assist]

Using an explicit switch statement with a default fallback is safer and more maintainable than an if-else chain that defaults to the 'full' layout. If an invalid or unexpected preset value is passed at runtime, it should fall back to the default 'chat-preview' preset. Additionally, wrapping localStorage.setItem in a try-catch block prevents runtime crashes in environments where storage access is restricted.

  applyPreset(preset: WorkspacePreset): void {
    if (!this.isDockviewInitialized()) return;
    this.dockviewApi.clear();
    switch (preset) {
      case 'chat':
        this.buildChatLayout();
        break;
      case 'chat-preview':
        this.buildChatPreviewLayout();
        break;
      case 'full':
        this.buildFullLayout();
        break;
      default:
        this.buildChatPreviewLayout();
        preset = 'chat-preview';
        break;
    }
    this.activePreset.set(preset);
    try {
      localStorage.setItem(WORKSPACE_PRESET_KEY, preset);
    } catch (e) {
      console.warn('Failed to save workspace preset to localStorage', e);
    }
  }

[gemini-code-assist]

Since flex-direction: column is now always applied to .workspace-container by default, the extension-mode class is no longer needed for layout styling. Please also clean up the unused isExtension signal in composer-workspace.ts and its binding in composer-workspace.ng.html to avoid dead code.

[jerelvelarde]

Addressed the Gemini review:

• localStorage can throw — the preset read and write are now wrapped in try/catch (in workspace-layout.ts, where the preset logic now lives). A read failure falls back to the render-focused default; a write failure is a no-op.
• switch over if-else — layout dispatch (rebuildLayout) is now a switch whose default falls back to chat-preview rather than full.
• Dead code — removed the unused extension-mode class binding, the isExtension signal, and the now-orphaned ngOnInit.

Rebased onto latest main; full shell suite (723 tests) green.