Shared from "Claude-Code" on Inkdown
Supporting subsystems: React context providers, custom output styles, and project onboarding.
context/)A collection of React context providers for UI subsystems.
notifications.tsxIn-app notification system:
// Provider
<NotificationProvider>
<App />
</NotificationProvider>
// Usage
const { addNotification } = useNotifications()
addNotification({ type: 'info', message: 'Saved!' })Used by:
stats.tsxStatsStore context for frame timing and performance metrics:
// Provider wraps the app
<StatsProvider>
<App />
</StatsProvider>
// Track frame time
const { markFrame } = useStats()
markFrame('render_complete')mailbox.tsxMessage passing between components:
// Send a message
sendMailboxMessage('task_completed', { taskId: 'abc' })
// Subscribe
useMailboxMessage('task_completed', (data) => { ... })modalContext.tsxModal dialog management:
const { openModal, closeModal } = useModal()
openModal(<SettingsDialog />)overlayContext.tsx / promptOverlayContext.tsxOverlay UI management for floating panels, tooltips, and prompt overlays.
fpsMetrics.tsxFPS tracking context for performance monitoring:
const { fps } = useFpsMetrics()
// → 58 (current FPS)voice.tsxVoice mode context provider:
const { isVoiceActive, startListening, stopListening } = useVoice()QueuedMessageContext.tsxMessage queuing for the REPL — handles queued user messages during processing.
outputStyles/)Custom output style system for tailoring Claude's behavior.
Users create .md files in .claude/output-styles/ or ~/.claude/output-styles/:
.claude/output-styles/
├── concise.md
├── verbose.md
└── code-focused.mdEach file:
---
name: Code-Focused
description: Focus on code, minimize explanation
keep-coding-instructions: true
---
Always provide code in full. Minimize explanations.
Focus on implementation details.// Load styles from directories
const styles = await loadOutputStylesDir([
'~/.claude/output-styles/',
'.claude/output-styles/',
])Plugins can include styles with force-for-plugin frontmatter:
---
name: Plugin Style
force-for-plugin: true
---projectOnboardingState.ts)Tracks project-specific onboarding steps.
| Step | Description | Completable |
|---|---|---|
| workspace | Create/clone a project | No (informational) |
| claudemd | Run /init to create CLAUDE.md | Yes |
interface ProjectOnboardingState {
allCompletableStepsDone: boolean
seenCount: number // Stops showing after 4 views
}Avoids filesystem hits on every render:
// Memoized — only re-checks when settings change
const onboardingConfig = useMemoizedOnboardingConfig()dialogLaunchers.tsx)Thin async launchers for one-off dialog JSX components:
// Each function dynamically imports its component
async function showSnapshotUpdateDialog(done) {
const { SnapshotUpdateDialog } = await import('./SnapshotUpdateDialog')
render(<SnapshotUpdateDialog onDone={done} />)
}| Dialog | Purpose |
|---|---|
SnapshotUpdateDialog | Agent memory snapshot conflicts |
InvalidSettingsDialog | Settings validation errors |
AssistantSessionChooser | Pick a bridge session |
AssistantInstallWizard | First-time assistant setup |
TeleportResumeWrapper | Teleport session resume |
TeleportRepoMismatchDialog | Teleport repo selection |
ResumeConversation | Interactive session picker |
replLauncher.tsx)Thin async launcher that dynamically imports App and REPL components:
async function launchRepl() {
const { App } = await import('./screens/App')
const { REPL } = await import('./screens/REPL')
renderAndRun(<App><REPL /></App>)
}Extracted from main.tsx for performance — avoids eager import of the full React tree.
interactiveHelpers.tsx)Core utilities for the interactive REPL startup sequence.
showSetupScreens()The full onboarding/setup pipeline:
┌─────────────────────────────────────────┐
│ Setup Pipeline │
│ │
│ 1. Onboarding │
│ 2. TrustDialog │
│ 3. ClaudeMdExternalIncludesDialog │
│ 4. GroveDialog │
│ 5. ApproveApiKey │
│ 6. BypassPermissionsModeDialog │
│ 7. AutoModeOptInDialog │
│ 8. DevChannelsDialog │
│ 9. ClaudeInChromeOnboarding │
└─────────────────────────────────────────┘getRenderContext()Sets up the rendering environment:
exitWithError() / exitWithMessage()Fatal error rendering through Ink:
exitWithError('Failed to initialize', error)
// → Renders error box in terminal, then exits| File | Purpose |
|---|---|
src/context/notifications.tsx | Notification system |
src/context/stats.tsx | Stats/performance context |
src/context/mailbox.tsx | Message passing |
src/context/modalContext.tsx | Modal dialogs |
src/context/overlayContext.tsx | Overlay management |
src/context/promptOverlayContext.tsx | Prompt overlay |
src/context/fpsMetrics.tsx | FPS tracking |
src/context/voice.tsx | Voice mode context |
src/context/QueuedMessageContext.tsx | Message queuing |
src/outputStyles/loadOutputStylesDir.ts | Output style loader |
src/projectOnboardingState.ts | Project onboarding |
src/dialogLaunchers.tsx | Dialog launchers |
src/replLauncher.tsx | REPL launcher |
src/interactiveHelpers.tsx | Setup & rendering utilities |