VibeCoder — Two Chromes, Same Workspace

The chat surface (left) and the sovereign workspace (right) host the same 7+3 components — file tree, EditorVibeCard, PreviewCard, InspectorPanel, Peek. They differ only in layout: chip-based single column vs 3-curtain desktop layout. ~1-2 days of work to ship the right one. Already-running, no rush.

A Chat Surface (live today)

vibecoder.freshvibeapps.com/vibechat/ — chip-based, mobile-first, single column

Coder Preview Chat Docs Diff Tests Blueprint Flow

Add a 3rd layer type to VibeScope: SVG with file picker

↳ thinking: 3 files to touch, FvRE widget-scaffold pattern

Create VibeScopeSvgLayer.tsx with file picker UI

Add SVG type to LayerKind union + toolbar chip

Update layerTypes.ts schema with 4 fields (path, fill, stroke, width)

Starting Step 1. ETA 8 min. Will update you when files are written.

Use orange #f59e0b for stroke

Got it — adding stroke: "#f59e0b" as default. Generating files now.

B Sovereign Workspace (not built yet)

3-curtain desktop layout: file tree (S1) + editor (S2) + 6-mode inspector (S3) — ~1-2 days from FVS module components

FILES

▾ studio/modules/vibescope

▾ src/layers

ImageLayer.tsx

FrameLayer.tsx

SvgLayer.tsx

TextLayer.tsx

ShapeLayer.tsx

layerTypes.ts

▸ src/panels

▸ src/toolbar

SvgLayer.tsx ×

layerTypes.ts ×

1// SVG layer — Phase 2 layer type

2import * as React from 'react';

3import { useState } from 'react';

5interface SvgLayerProps {

6 path: string;

7 fill?: string;

8 stroke?: string;

9 strokeWidth?: number;

10}

12export function SvgLayer({ path, stroke = "#f59e0b" }: SvgLayerProps) {

13 return <svg viewBox="0 0 100 100" stroke={stroke}>

14 <path d={path} />

15 </svg>;

16}

Use orange #f59e0b for stroke

Got it — applying to SvgLayer default. 4 tests pass.

INSPECTOR

Editor AST Props State Logs Metadata

Element: SvgLayer

path

M10 10 L 90 90

fill

transparent

stroke

#f59e0b

strokeWidth

LSP (typescript-language-server)

✓ diagnostics: 0 errors

✓ hover: 3 symbols resolved

✓ go-to-def: working

Lineage

parent: VibeScopeWorkspaceRoot
created: 2026-07-29 14:32 BST
by: vibecoder-mavis (Plan B Phase C)

What's the same, what's different

Same components, different chrome. Both versions host the same 7 chips/cards (Coder, Preview, Docs, Diff, Tests, Blueprint, Flow), the same 6-mode Inspector, the same Peek (Backstage), the same EditorVibeCard. The only difference is layout.
Chat surface (A) = single column, chip navigation, mobile-first, chat-first. You click a chip → that tool opens. Best for short bursts on phone/tablet.
Sovereign workspace (B) = 3 curtains always visible, desktop-first, file-tree-first. Everything visible at once. Best for long editing sessions on desktop, or when docked into FVS Studio.
The chat panel exists in BOTH — Chrome B has it docked at the bottom of the centre pane. Same LLM, same flow, just smaller.
Inspector modes in B (Editor / AST / Props / State / Logs / Metadata) are already built in FVS module — they're hidden under the Preview chip in Chrome A.

	Chrome A: Chat surface	Chrome B: Sovereign workspace
Status	Live, shipping	Not built (4 untracked FVS files)
Best for	Mobile, short edits, chat-first	Desktop, long sessions, file-tree-first
Work to build	— (already done)	1-2 days (rearrange FVS module components)
LLM chat	Full panel, top of page	Docked at bottom of centre
File tree	Buried in Coder chip	Always visible (left curtain)
Inspector	Behind Preview chip (1 mode)	Always visible (6 modes)
Used by FVS Studio	No	Yes (when docked)