VibeFuse Components Identical clones of every desktop UI surface · v0.1.23
← Back to VibeFuse docs
74 / 74

Every VibeFuse UI surface

Live HTML/CSS/JS clones of the VibeFuse desktop app — shell chrome, navigation, widgets, settings tabs, popups, cards, and the styling token pack. Classes match src/renderer. Switch the theme in the header to restyle every clone.

Design tokens

Midnight Navy :root values. Other themes only override color / orb motion tokens.

Token swatches

Core surfaces, text, accent, gold, danger, and chrome from global.css.

styles/global.css tokens
--bg-0#06080d
--bg-1#0a1018
--bg-2#111827
--surfacergba(14, 20, 32, 0.66)
--text#eef2f8
--text-dim#9aa8bc
--accent#8fb0d4
--gold#c9a962
--danger#ff6b7a
--accent-deep#2a4568
--chrome-bgrgba(10, 16, 26, 0.76)
--ambient-a#243a58

Fonts: Outfit 320–700 and JetBrains Mono 400/500. Icons are Lucide SVGs. There is no .btn class — actions use .nav-item, .settings-btn, .icon-ghost, and .circle-btn.

Theme pack

Nine built-in [data-theme] presets plus the bundled Dark Snow styling pack.

Built-in themes

Picking a theme in Appearance clears any styling pack. Packs then override tokens on <html>.

shared/themes.ts styling

Bundled pack: com.vibefuse.styling.dark-snow — silver frost tokens, snow particles on sidebar/canvas, frosted orb. Marketplace packs live in C:\vibefuse\styling.

Shell & chrome

Window frame, left rail, session strip, voice orb, and status chips from App.tsx.

App Shell

Full workspace chrome: ambient stage, title bar, sidebar, canvas, and status bar.

src/renderer/src/App.tsx shell
VibeFuse AI Agent Harness · v0.1.23
Canvas

Your canvas is clear

Spawn a CLI, terminal, or browser from the left rail. Widgets stay draggable and marketplace-ready.

File menu open with recent-session flyout. Agents section open (Vibe Agent active). Widgets / Skills closed. Session 1 audible EQ, Client site muted, Notes quiet. Dock: Bot visible+active, Globe visible, YouTube hidden.

Title Bar

Brand, application menus, settings, and window controls.

src/renderer/src/components/TitleBar.tsx chrome
VibeFuse AI Agent Harness · v0.1.23

Closed File / Agent / Voice menus. Brand mark is an inline 44×44 SVG (no missing png).

App Menu Bar

File, Agent, and Voice menus with nested provider flyouts.

src/renderer/src/components/AppMenuBar.tsx chrome

Agent menu open. Provider flyout open with OpenAI active. Gemini uses the 4-point star; others are colored tiles.

Session Tabs

Canvas session strip with mute, audible EQ, overflow menu, and new-session control.

src/renderer/src/components/SessionTabs.tsx sessions

Active + audible EQ, muted browser tab, quiet Notes tab (no audio control). Drag/drop states omitted.

Agent Widget Dock

Per-instance pills for focus, hide, and close on the session tab bar.

src/renderer/src/components/AgentWidgetDock.tsx widgets

Visible+active+focused Bot, visible Globe, hidden YouTube with aria-pressed="true" on the hide button.

Canvas Zoom

Zoom out, reset label, and zoom in for the active session.

src/renderer/src/components/CanvasZoomControl.tsx canvas

Reset label shows 100% from formatCanvasZoom(1).

Status Bar

Workspace chips for voice mode, provider, model, and local service health.

src/renderer/src/components/StatusBar.tsx chrome

Mode Normal, Voice Jarvis, Provider OpenAI, Model gpt-4o-mini, Speech/Piper is-ok, FCC is-warn, Discord is-idle.

Voice Dock

Hold-to-talk orb in every activity state, plus notes and compact sizes.

src/renderer/src/components/VoiceDock.tsx voice

Idle+wake, recording is-hot, thinking, transcribing, tool, generating (.spin), speaking, notes, compact 36px.

Orb Activity Pill

Floating status label that tracks the voice orb during a turn.

src/renderer/src/components/VoiceDock.tsx voice
Listening
Thinking
Tool calling
Transcribing
Generating voice
Speaking

Fixed-position pills forced to position:static;transform:none so they sit in a catalog row.

Voice Toast

Transcript overlay after a hold-to-talk or wake-word turn.

src/renderer/src/components/VoiceDock.tsx voice
You Open the client landing page and summarize the hero copy.
Assistant The hero leads with “Ship the vibe, not the boilerplate,” then a short CTA to start a canvas session.

.transcript.is-toast with static positioning so it stays inside the card instead of position:fixed.

Workspace Popover

Bar chip plus the open folder card and editable path field.

src/renderer/src/components/WorkspacePopover.tsx canvas

Bar variant open: canvas-workspace-btn has-path, folder card, and path textarea.

Voice Mode Picker

Unused title-bar dropdown that still broadcasts mode changes to VoiceDock.

src/renderer/src/components/VoiceDock.tsx voice

Dead chrome still exported from VoiceDock. Open picker with Normal Mode selected.

Equalizer

Eighteen idle bars used by older voice chrome.

src/renderer/src/components/Equalizer.tsx voice

Idle mode only: 18 bars with the component’s 0.22 + ((i * 17) % 9) / 28 scale and staggered breathe timing.

Canvas Empty

Placeholder when the active session has no widgets.

src/renderer/src/components/WidgetCanvas.tsx canvas

Your canvas is clear

Spawn a CLI, terminal, or browser from the left rail. Widgets stay draggable and marketplace-ready.

Exact empty-state copy from WidgetCanvas when instances.length === 0.

Canvas Topbar

Canvas label and workspace chip sitting on the shell’s top edge.

src/renderer/src/components/WidgetCanvas.tsx canvas
Canvas

Title “Canvas” plus workspace chip labeled VibeFuse.

Boot Crash

Inline-styled renderer error boundary when App fails to mount.

src/renderer/src/main.tsx error

VibeFuse failed to render

TypeError: Cannot read properties of null (reading 'sessions')
    at App (App.tsx:164:15)
    at renderWithHooks (react-dom.development.js:15486:18)
    at mountIndeterminateComponent (react-dom.development.js:20103:13)
    at beginWork (react-dom.development.js:21626:16)

Exact inline styles from BootErrorBoundary in main.tsx, with a dummy stack.

Settings

Linear / Arc settings modal and every tab: General through About, plus shared controls.

Settings modal

Full settings dialog with sidebar search, grouped nav, and the General tab open.

SettingsModal.tsx dialog

Clone of SettingsModal: .overlay.settings-overlay + .settings with all 14 tabs. General is is-active.

Settings sidebar

Brand, search, and grouped nav for the 14 settings tabs.

SettingsModal.tsx nav

.settings-sidebar clone: .settings-brand, .settings-search, .settings-nav-group.

Settings controls

Shared primitives from SettingsControls used across every tab.

settings/SettingsControls.tsx atoms

Section

Title, description, and body for a settings group.

Enabled

Switch is on.

Disabled option

Switch is off.

Hint under the control.

Ready
Found 2 input and 1 output device(s).
Link a VF- product key to publish.

Nothing here yet

Empty state used when a catalog or listing has no rows.

Atoms: settings-section, settings-toggle, settings-switch, settings-field, settings-btn, settings-status, settings-empty, chip, themed-select-trigger.

General tab

Workspace directory and agent auto-install toggles.

settings/GeneralSettingsTab.tsx tab

Workspace

Where agents work, and whether VibeFuse installs them for you.

Used when an agent has no folder of its own. Empty = your home folder.

Install missing agents on launch

When VibeFuse starts, install any agents that are not on this machine yet.

Install missing agents when you open them

If you open an agent that is not installed, install it before it starts.

Body of GeneralSettingsTab only — no modal chrome.

Appearance tab

Nine theme presets, Dark Snow pack, accent, orb selects, and reduce motion.

settings/AppearanceSettingsTab.tsx theme

Theme

Built-in looks. Picking one turns off any styling pack.

Styling packs

App colors, shell backgrounds, particles, session tabs, menu strip, and orb look from C:\vibefuse\styling.

Accent

Highlight color for buttons, focus, and active states.

Use the swatch or paste a hex value.

Reduce motion

Turns down animations across VibeFuse.

Record orb

Style and motion can follow the pack or mix independently.

Match appearance uses the selected pack, or the built-in orb.

Match appearance uses the selected pack, or the built-in motion.

Swatches from THEME_PRESETS in themes.ts. Dark Snow from styling/Dark-Snow/manifest.json.

Navigation tab

Two-column sidebar editor with hide controls and a delete confirm overlay.

NavigationSettingsTab.tsx nav

This heading appears in the sidebar. Press Enter or click away to save.

  • Built-in
    Vibe Agent Shown in sidebar
  • Agent
    Claude Shown in sidebar
Delete saved page?

“Project brief” will be removed from navigation and the catalog. Open instances of it will close.

.nav-settings two-column editor. Overlay is .nav-settings-confirm.

Agent tab

LLM provider cards and Agent CLI install grid.

AgentSettingsTab.tsx cli

LLM provider

Used by the voice dock and chat assistant.

Agent CLIs

Install agents for the sidebar. Only installed ones appear in navigation.

Claude

FreeClaudeCode :8082

Installed

npm install -g @anthropic-ai/claude-code

Codex

OpenAI Codex CLI

Installed

npm install -g @openai/codex

Gemini

Google Gemini CLI

Not installed

npm install -g @google/gemini-cli

Cursor

Cursor Agent CLI

Installed

irm 'https://cursor.com/install?win32=true' | iex

Qwen

Qwen Code CLI

Not installed

npm install -g @qwen-code/qwen-code

Terminal

PowerShell workspace

Installed

Uses the system shell. Nothing extra to install.

System shell · always available when detected

.provider-grid + .agent-cli-grid. Logos from AgentCliIcon.

Voice tab

Mode chips, Jarvis wake word, and audio device selects.

settings/VoiceSettingsTab.tsx voice

Voice

Microphone, speakers, and wake word.

Jarvis wake word

Hands-free listening for a spoken name in Normal mode.

Jarvis is always listening in Normal mode, including while Piper is speaking or the agent is using tools.

Audio devices

Choose which microphone and speakers VibeFuse uses for voice, Piper playback, and in-app media.

Piper voice replies, wake-word audio, video widgets, and browser webviews.

Hold-to-talk, notes mode, Jarvis wake word, and agent mic.

Mode chips use .chip.on. Devices are closed .themed-select-triggers. Wake word maps to jarvisWakeWord.

Local Servers tab

Piper and Whisper endpoints, speed/volume, HyperFrames, and Skill Seekers fields.

settings/LocalServersSettingsTab.tsx servers

Piper TTS

Local text-to-speech for Jarvis replies. Voice, speed, and loudness apply to spoken output.

OpenAI-compatible /v1/audio/speech server.

Whisper STT

Local speech-to-text for live transcription. Tiny is fastest; larger models are more accurate.

Local transcribe API used when the bundled Whisper server is down.

HyperFrames

Local HyperFrames Studio for HTML-to-video compositions.

Studio on port 4567.

Skill Seekers

Find existing docs-to-skill presets and package new skills locally.

Local Python MCP. No API key required.

Kept as settings-section + settings-field — Piper/Whisper URLs, speed/volume labels, HyperFrames and Skill Seekers paths.

Tools tab

Branded MCP cards for Google, GitHub, Copilot, Discord, Linear, HyperFrames, Skill Seekers, Firecrawl, and a custom server.

settings/ToolsSettingsTab.tsx mcp
Google Workspace

Gmail, Drive, Calendar, Docs, Sheets, and more · signed in as zak@fuseintelligence.org

ready · 42
Gmail Drive Calendar
GitHub

Repos, issues, pull requests, and files via GitHub MCP · token saved

ready · 18
Repos Issues Pull requests
GitHub Copilot

Copilot coding agent, reviews, and Spaces via Copilot MCP · token available

connecting
Copilot agent Copilot Spaces
Discord

Local MCP from SaseQ/discord-mcp · Java ready · JAR ready · token saved

ready · 24
Messages Channels Roles
Linear

Hosted MCP at https://mcp.linear.app/mcp · OAuth token saved

ready · 12
Issues Projects Teams
HyperFrames

Local Studio for HTML-to-video. Workspace C:\vibefuse\hyperframes · Studio on port 4567

ready
Studio UI Preview Render
Skill Seekers

Local Python MCP at C:\vibefuse\Skill_Seekers

ready · 6
Find skills Docs → skill
Crawl4AI + SearXNG

Open-source crawl/scrape on http://127.0.0.1:11235

error
Search Scrape Crawl
disabled

Branded cards use mcp-card-* and mcp-google-mark is-*. Discord/Linear logos from assets/mcp/.

Skills tab

Local and marketplace skill cards with show/hide and a delete-folder confirm.

SkillsSettingsTab.tsx skills
hyperframes-core Local
v1.2.0

Owner VibeFuse

The HyperFrames composition contract — build one renderable project.

hyperframes-core/SKILL.md

media-use Marketplace
v2.0.1

Owner VibeFuse

Agent Media OS for HyperFrames projects.

media-use/SKILL.md

notes-binder Local
v1.0.0

Access, read, create, and search notes in Notes Binder.

notes-binder/SKILL.md

Skills reuse .widgets-settings-grid / .widgets-settings-card. Confirm state shows Cancel + Delete folder.

Notes tab

Notes hero, two session panels, and a relative confirm dialog.

NotesSettingsTab.tsx notes

Notes

Sessions

2 sessions · 4 saved items

AI summary Sep 8, 2026, 2:16 PM 
Shipped the settings catalog and queued the installer rebuild.

Transcripts

Segment 1 
We should list every settings tab with the real class names.

.notes-settings-hero, .notes-panel.is-open, pills, .notes-body-pre, and a relative .notes-confirm-dialog.

Widgets tab

Catalog cards plus the FreeClaudeCode status card.

WidgetsSettingsTab.tsx widgets
FreeClaudeCode Running
http://127.0.0.1:8082
Provider
OpenAI
Model
gpt-4o-mini
Upstream
openai
Claude CLI server is healthy.
Browser Built-in
v1.0.0

Embedded Chromium pane with compact tabs, a URL bar, and multiple loaded pages.

com.vibefuse.browser

Cannot remove
YouTube Built-in
v1.0.0

YouTube in a focused viewer — no address bar or browser controls.

com.vibefuse.youtube

Cannot remove
HyperFrames Built-in
v1.0.0

Local HyperFrames Studio — HTML-to-video composer on the canvas.

com.vibefuse.hyperframes

Cannot remove
Video Built-in
v1.0.0

Play a local video file (HyperFrames MP4 renders, recordings, and other media).

com.vibefuse.video

Cannot remove
Files Built-in
v1.0.0

Browse the session workspace and preview images, videos, and PDFs.

com.vibefuse.files

Cannot remove
Project brief Custom

Saved page from the canvas.

saved-page.project-brief

Cannot remove
Weather board Local
v0.3.1

Marketplace weather widget.

com.example.weather

.widgets-settings-grid plus .freeclaude-status-card with dt/dd provider, model, and upstream.

Marketplace tab

Seller profile fields and local listing cards for Live, Unpublished, and New.

MarketplaceSettingsTab.tsx marketplace

Seller profile

Zak Rowton · VF-1A2B3C4D5E…

Local widgets

3 found in your widgets folder.

Weather board v0.3.1
Live on marketplace

Current conditions for the session city.

weather-board 12 files by VibeFuse com.example.weather
Kanban lite v1.0.0 · listed as v0.9.0

A compact board for session tasks.

kanban-lite 8 files by VibeFuse com.example.kanban
Clipboard stack v0.1.0
Not on marketplace

Pin copied snippets next to the canvas.

clipboard-stack 5 files by Unknown com.local.clipboard

.mp-settings seller profile + .mp-local-grid badges is-listed / is-hidden / is-new.

Styling marketplace publish

SettingsMarketplacePublish folder row and a listed Dark Snow pack.

settings/SettingsMarketplacePublish.tsx styling

Local styling packs

1 found in your styling folder.

Styling folder C:\vibefuse\styling
Dark Snow v1.0.0
Live on marketplace

Black chrome workspace with silver frost. White iced orb and black particle motion.

Dark-Snow 4 files by VibeFuse com.vibefuse.styling.dark-snow

SettingsMarketplacePublish layout: .mp-settings-folder-row at C:\vibefuse\styling, Dark Snow is-listed.

Updates tab

Changelog cards for feature, fix, improvement, and release.

UpdatesSettingsTab.tsx updates

.updates-settings-card badges: kind-feature, kind-fix, kind-opt, kind-release.

History tab

Voice turns with user, assistant, and error lines, plus the empty dashed box.

settings/HistorySettingsTab.tsx history
Voice history 3 conversations
You

Open settings and show the General tab.

Assistant

Opening Settings on General.

You

List the installed agent CLIs.

Assistant

Claude, Codex, Cursor, and Terminal are installed.

Voice

I heard the wake word, but no command followed.

Speak with the orb to start a history here.

.voice-history-line.is-user / .is-assistant / .is-error, plus .voice-history-empty dashed box.

About tab

Product hero, license card, and an in-progress update bar.

settings/AboutSettingsTab.tsx about

VibeFuse

Version 0.1.23

License

Linked profile

Key VF-1A2B3C4D5E · Pro

Updates

Installed version 0.1.23 · Latest 0.1.23

An update is available.

42%

.about-hero VibeFuse v0.1.23, license VF-1A2B3C4D5E · Pro, .about-update-card at 42%.

Settings empty

Empty-state atom used when a catalog, listing, or category has no rows.

settings/SettingsControls.tsx atom

No skills found

Drop a folder with SKILL.md into the path below, then reload. YAML frontmatter is optional.

SettingsEmpty atom: .settings-empty, .settings-empty-title, .settings-empty-description.

Themed select

Closed trigger plus a visible in-flow menu with search, selected, and active options.

ThemedSelect.tsx select

Menu is position:relative so it stays in the card. One option is is-selected, one is is-active.

Widgets, overlays & cards

Canvas frames, agent/browser/terminal guests, dialogs, and the card families used in settings and menus.

Widget frame

Chrome title, version, font scale, expand, and close. is-ai-active pulses the accent ring while the agent works.

Chrome WidgetFrame.tsx
Vibe Agent v1.0.0
13px
Vibe Agent gpt-4o-mini
You
Sketch a weather widget for the canvas.
Vibe Agent v1.0.0
13px
Working…

Idle frame plus .widget-frame.is-ai-active. Title is .widget-title-label; scale lives in .widget-scale.

Widget context menu

Right-click chrome menu: refresh, rename, and z-order.

Menu WidgetCanvas.tsx

Catalog uses position: static. Live menus are position: fixed and portaled to document.body.

Session menu

.widget-menu.session-menu from a session tab right-click.

Session SessionTabs.tsx

Shares .widget-menu chrome. .session-menu only raises z-index so it sits above webviews.

Close session?

Confirm dialog with the danger action that stops widgets and terminals.

Dialog SessionTabs.tsx

.overlay is pinned absolute inside .comp-preview.is-modal. Danger uses .session-dialog-actions .danger.

New session / rename widget

Field variants of .session-dialog — new canvas tab and widget title.

Dialog AppMenuBar.tsx

Same .session-dialog + .field as the live overlays, shown as relative cards so both variants fit a row.

System prompt

App-menu overlay for the shared 12,000-character prompt.

Overlay AppMenuBar.tsx

System prompt

Optional instructions appended to Vibe Agent, voice requests, and recording summaries.

0 / 12,000

Classes: .overlay.app-prompt-overlay + .session-dialog.app-prompt-dialog. Counter is .help.

Folder picker

Choose-folder dialog with toolbar, path, rows, create-folder, and footer.

Picker FolderPickerModal.tsx

.overlay.folder-picker-overlay + .folder-picker. Create row is .folder-picker-create.

Marketplace browse

Store modal with brand mark, spinner, and placeholder body.

Marketplace MarketplaceBrowseModal.tsx

Live guest is a webview.marketplace-browse-webview. Catalog shows .marketplace-browse-placeholder.

Skill details

Inspect modal: kicker, title, meta grid, file list, and body excerpt.

Skills SkillDetailsModal.tsx

.skill-details-kicker, .skill-details-grid, and .skill-details-files with an .is-active file button.

Slash command menu

Type / in the composer to insert a skill. One row is is-active.

Agent SlashCommandMenu.tsx
Skills

Position overridden to relative for the catalog. Live menu is absolute above .agent-composer-row.

Agent shell

Full Vibe Agent: topbar, tabs, thread, status, and composer.

Agent CustomAgentWidget.tsx
Vibe Agent C:\xampp\htdocs\AI-Brain\VibeFuse
You
List the files in this workspace and sketch a weather widget.
Agent

Workspace is VibeFuse. I’ll add a compact weather card with temp, condition, and a 3-day strip.

tsx
<article className="weather-card">…</article>
Working...
Type / for skills

Real shell: .agent-shell → topbar, tabs, thread, composer. Hint class is .agent-composer-hint.

Agent empty

Idle chat state before the first message.

Agent CustomAgentWidget.tsx
Ready when you are

Chat with your configured provider. Type / to insert a skill or MCP connection as a slash command — the agent must use it for that prompt.

.agent-empty + .agent-empty-orb. Shown when the thread has no messages and the agent is idle.

Agent turn details

Open activity accordion with tool items — one failed.

Agent CustomAgentWidget.tsx
Tools used (3)
  • fs.list 
    {"path":"C:\\xampp\\htdocs\\AI-Brain\\VibeFuse\\src"}
  • browser.navigate 
    {"url":"https://fuseintelligence.org"}
  • discord.post 
    {"channel":"general","error":"Missing DISCORD_BOT_TOKEN"}

Failed tools get .agent-tool-item.failed. Running tools show .spin on Loader2.

Browser shell

Tabstrip, nav bar, URL field, and zoom.

Browser BrowserWidget.tsx
100%

Pills are .browser-pill.is-active. Zoom uses .browser-zoom (chrome also has .widget-scale).

YouTube locked shell

Saved-page / YouTube guest — no address bar, locked heading.

Browser YouTubeWidget.tsx
YouTube

.browser-shell.is-locked hides the URL bar. Heading uses .browser-locked-title.

HyperFrames wait panel

Studio boot / error panel with Starting… and Retry.

HyperFrames HyperFramesWidget.tsx
HyperFrames Studio

Starting…

Live widget shows a spinner until healthy; Retry appears on showError. Both states are shown together for the catalog.

Video player

Empty state and a gradient stand-in poster.

Video VideoPlayerWidget.tsx
No video loaded

Render a HyperFrames project, then play the MP4 here.

Empty uses .video-player-empty. Second card fakes a poster in .video-player-media.

Terminal

xterm wrap with a fake prompt — JetBrains Mono.

Terminal TerminalWidget.tsx
Terminal v1.0.0
zak@desktop:~/VibeFuse$ npm run dev
VITE v6.2.0 ready in 412 ms
➜ Local: http://localhost:5173/
zak@desktop:~/VibeFuse$

Live guest is xterm.js inside .xterm-wrap > .xterm-host. Frame uses :has(.xterm-wrap) to drop backdrop-filter.

Iframe / marketplace widget

Weather-titled frame with an inner dashboard stand-in.

Iframe IframeWidget.tsx
Weather v1.0.0

Austin, TX

72°

Partly cloudy

Thu 74°Fri 68°Sat 71°

Marketplace guests load in IframeWidget. This card stands in for the framed dashboard.

Files explorer

Toolbar, crumbs, and mixed file rows.

Files FileExplorerWidget.tsx

.files-shell → toolbar, crumbs, .files-row. Directory icon uses .files-row-icon.is-dir.

Files preview overlay

Image preview bar for logo.png.

Files FileExplorerWidget.tsx

.files-preview-overlay + .files-preview-bar. Live images use img.files-preview-media.

Theme grid

All nine built-in presets. Midnight Navy is active.

Settings AppearanceSettingsTab.tsx

.theme-grid + .theme-card.active. Labels match THEME_PRESETS in themes.ts.

Provider grid

LLM picker cards from Settings → Provider.

Settings ProviderSettingsTab.tsx

.provider-grid / .provider-card.active. Live icons are ProviderIcon logos; Gemini is the real star SVG.

Agent CLI grid

Installable sidebar agents from Settings → Agent.

Settings AgentSettingsTab.tsx
Terminal

PowerShell workspace

Installed

Uses the system shell. Nothing extra to install.

System shell · always available when detected

Claude

FreeClaudeCode :8082

2.0.0

npm install -g @anthropic-ai/claude-code

Codex

OpenAI Codex CLI

Not installed

npm install -g @openai/codex

Gemini

Google Gemini CLI

Not installed

npm install -g @google/gemini-cli

Cursor

Cursor Agent CLI

Installed

irm 'https://cursor.com/install?win32=true' | iex

Qwen

Qwen Code CLI

Not installed

npm install -g @qwen-code/qwen-code

.agent-cli-card.is-installed / .is-missing. Logos are the real AgentCliIcon SVGs.

MCP list

Custom MCP connections with enable switch and state pills.

MCP ToolsSettingsTab.tsx
ready · 12
connecting
error

.mcp-list / .mcp-card. States: .mcp-state.ready, .connecting, .error.

Local marketplace packages

Live / Hidden / New badges on publisher cards.

Marketplace SettingsMarketplacePublish.tsx
Weather Board v1.2.0
Live on marketplace

Austin weather dashboard for the canvas.

weather-board14 filesby Fusecom.fuse.weather
Notes Peek v0.9.0 · listed as v0.8.1

Pinned Notes Binder excerpt.

notes-peek6 filesby Zakcom.fuse.notes-peek
Dark Snow pack v1.0.0
Not on marketplace

No description.

Dark-Snow4 filesby Fusedark-snow

Badges: .mp-local-badge.is-listed, .is-hidden, .is-new.

Widgets settings grid

Kind badges: builtin, saved-page, marketplace, and FCC ready.

Settings WidgetsSettingsTab.tsx
Vibe Agent Built-in
v1.0.0

Chat with your configured provider on the canvas.

com.vibefuse.custom-agent

Docs Custom
v1.0.0

Saved page — locked URL, no address bar.

https://fuseintelligence.org/docs

Weather Local
v1.2.0

Marketplace iframe package.

com.fuse.weather

FreeClaudeCode Ready
http://127.0.0.1:8082
Provider
OpenAI
Model
gpt-4o-mini
Upstream
openai
Claude CLI server is healthy.

Kinds: .is-builtin, .is-saved-page, .is-marketplace, .is-fcc-ready.

Updates cards

Four kind badges from Settings → Updates.

Updates UpdatesSettingsTab.tsx

Badges: .kind-feature, .kind-fix, .kind-opt, .kind-release.

Notes panel

Open recording note with summary + transcript.

Notes NotesSettingsTab.tsx
Summary 4:12 PM 
Open on a locked YouTube widget, then cut to the agent shell sketching the weather card. End on Dark Snow chrome.

Transcripts

Transcript4:08 PM
Okay, hold on the YouTube lock screen, then swipe to Vibe Agent…
Transcript4:10 PM
Type slash hyperframes and drop the hero loop on the canvas.

.notes-panel.is-open rotates .notes-panel-chevron and reveals .notes-panel-body.

Provider & CLI icons

OpenAI-like tiles, Gemini star, custom plus, and AgentCliIcon set.

Icons ProviderIcon.tsx

Gemini path matches ProviderIcon. CLI tiles are the six AgentCliIcon cases: terminal, claude, codex, gemini, cursor, qwen.

Dark Snow strip

Compact app-shell chrome using Dark Snow tokens inline.

Styling styling/Dark-Snow/theme.json
Vibe Agent

Tokens from styling/Dark-Snow/theme.json (#050506, #141416, #c8cdd4). Marked data-styling-pack="dark-snow".

Hold button

Leftover voice hold control — CSS still ships, UI is unused.

Legacy global.css

Dead CSS: .hold-btn, .hold-btn.hot, .hold-btn.busy .hold-ring. Agent now uses .agent-mic.

Chips & badges

Chip row, nav counts, agent badge, MCP states, and status-chip tones.

Chrome global.css
gpt-4o-mini OpenAI whisper-base
Widgets 12 Vibe Agent
ready · 12 connecting error disabled

.chip / .chip.on, .nav-count, .nav-cat-badge, .agent-badge, .mcp-state, .status-chip.is-ok|.is-warn|.is-error.