Renderer Components (src/renderer/src/components)

Structure

components/
  common/        shared primitives and hooks: Button, IconButton, Modal, Select, MenuList, FileTreeRow, use*.ts
  editor/        CodeEditor, DiffEditor, MarkdownPreview, ImageViewer, EditorArea/EditorGroup (tab bar), setup.ts, LSP extensions
  sidebar/       Explorer, SearchView, GitView (+ CommitBox, GitHistory, GitStashes) — one view per file
  quickInput/    QuickInput overlay, item builders, pickers, use*.ts for the file list, symbols and clone URL
  claude/        Claude panel: ClaudePanel, Timeline (+ `timeline/` parts), PromptBox (+ `usePromptText`, `usePromptMenus`), cards, ToolRow, AgentsStrip, use*.ts; mcp/ = the /mcp manager
  layout/        SidebarSlot, PanelSlot, ClaudeSlot, OverlayHost: the slots of `App`, each owning its selectors
  settings/      SettingsModal, SettingItem, DraftField, ShortcutsList
  containers/    ContainersView, ContainerGroup, ContainerRow, ContainerDetail
  ActivityBar · WorkspaceBar · Welcome · AddWorkspaceModal · RecentRow · StatusBar · BottomPanel · PanelGroupRow ·
  ProblemsPanel · ReferencesPanel · OutputPanel · TerminalPanel · TerminalFind · Toasts · Resizer (+ terminalLinks.ts, terminalRegistry.ts)
lib/             pure utilities (path, language, terminalBus…) — no React, testable

Quick Index — components

Ranking and labels for quick-pick lists: rankByLabel(entries, query, labelOf, { sort, tiebreak? }) (lib/rankByLabel.ts) is the only fuzzy filter/sort over a label (empty query keeps everything in order); pathLabel(name, dir, matches, offset, highlightDir?) (components/quickInput/highlight.tsx) renders the "name + folder" label of file, folder, symbol and workspace rows. Never re-implement either in a build*Items function.

Badge counters that cap (99+) use capCount(n, max = 99) from lib/capCount.ts (built on formatNumber); never hand-write n > 99 ? '99+' : n.

Strict typing (exactOptionalPropertyTypes, noUncheckedIndexedAccess; tests keep the first, not the second):

• prop?: T does not accept an explicit undefined. Add | undefined only on a prop/field that really receives a possibly-undefined value forwarded from another optional (MenuEntry.hint, QuickItem.tag, IconButton.shortcut, Command.when); otherwise omit the key. For an API that must not receive the key (CodeMirror configs, window.api options, shared contracts) spread omitUndefined({ … }) from @shared/omitUndefined or ...(cond && { key }); never key: maybeUndefined.
• array[i] / record[key] / regex.exec(…)[n] / typed arrays are T | undefined: guard (const x = arr[i]; if (!x) return), .at(-1) + check, a destructuring default (const [a = '', b = ''] = s.split('\n')), or string.charAt(i) for a character loop; ! only when the same expression makes it impossible. A non-empty fixed list is typed as a tuple (readonly [ModeInfo, ...ModeInfo[]]).
• JSON.stringify is typed string but returns undefined for undefined/functions: use jsonText(value, space?) (lib/jsonText.ts).
• A flag assigned inside a callback (set((s) => { changed = true })) is seen by TS as constant: return the value from the callback or compare results instead of reading the flag afterwards.

Rule: a local component needed in a second place moves to components/common/<name>.tsx and gets exported — never copy-paste it.

Quick Index — CSS classes (styles/*.css)

Patterns

• No IPC in components. Components call actions (explorerFsActions, gitActions, lspActions, terminalActions, fileViewActions, projectFiles…), never window.api.* or workspace.onChange; window.api.platform/homeDir are constants and fine. Editor infrastructure under components/editor (CodeMirror extensions, documentStore.ts/groupViews.ts, lspSync.ts, the load in CodeEditor/DiffEditor) still talks to window.api directly.
• Sidebar views: only the Explorer stays mounted (virtualized; keeps scroll and selection) and is hidden with the hidden attribute. Search and Git unmount when not visible (layout/SidebarSlot.tsx) and keep their state (results, commit message) in the store, so a hidden view never re-renders on watcher events. A new view keeps its state in the store, not in the component. Never hide with inline style.display: set hidden and give the class an explicit .x[hidden] { display: none } (a class that sets display beats the user-agent [hidden]); .sidebar, .claude-sidebar, .panel-container and .code-editor already do.
• Overlays (quick input: Quick Open / command palette / go-to-line) are one component at the top of App driven by store state.
• Dialogs: window.prompt() does not exist in Electron → inline input or overlay. Unsaved-changes questions use the native dialog (confirmAndSave → api.dialog.confirmUnsaved); every other question (discard, publish, trash) goes through confirmDialog (saveActions.ts → api.dialog.confirm); never window.confirm.
• Context menus are native, built in main (see fs:contextMenu).
• Shortcuts: a new shortcut = an entry in defaultKeys (+ defaultWhen if scoped) read by defaultKeybindings (src/shared/commands.ts, plus the id in CommandId)
  • a menu item in src/main/menu.ts if it belongs to a menu + registerCommand in the renderer registry. Never add a loose global keydown listener.

UI copy

• All UI text comes from the i18n catalogs (i18n skill): const t = useT() and t.<namespace>.<key>, with pt-BR, English and Spanish written together. Short and direct ("Open Folder…", "No changes."). Established technical terms stay in English (commit, stage, branch, push).
• Shortcut labels follow the OS: window.api.platform === 'darwin' → ⌘, otherwise Ctrl+.