InkdownInkdown
Start writing

Claude-Code

62 filesยท4 subfolders

Shared Workspace

Claude-Code
codex

20-contexts-styles-onboarding

Shared from "Claude-Code" on Inkdown

React Contexts, Output Styles & Onboarding

Supporting subsystems: React context providers, custom output styles, and project onboarding.


React Context Providers (context/)

A collection of React context providers for UI subsystems.

notifications.tsx

In-app notification system:

TypeScript
0000_start_here_index_and_recommended_reading_order.md
0100_project_overview_tech_stack_runtime_modes_and_folder_map.md
0200_startup_flow_entry_points_and_cold_start_sequence.md
0300_codebase_modules_layers_state_models_and_schemas.md
0400_system_architecture_and_design_rationale.md
0500_interactive_repl_request_flow_end_to_end.md
0600_headless_sdk_and_print_mode_request_flow_end_to_end.md
0700_mcp_integration_connection_and_tool_call_flow.md
0800_external_services_sdks_storage_and_local_dependencies.md
0900_environment_variables_settings_feature_flags_and_failure_modes.md
1000_non_obvious_patterns_gotchas_and_debugging_traps.md
1100_full_codebase_file_inventory_grouped_by_directory.md
kimi
00-overview.md
01-entrypoints.md
02-state-management.md
03-query-system.md
04-tools-system.md
05-tasks-system.md
06-ui-components.md
07-bridge-remote.md
08-services.md
09-skills-plugins.md
10-commands.md
11-testing-architecture.md
12-permission-system.md
13-build-system.md
14-ink-internals.md
15-git-internals.md
16-context-compaction.md
17-vim-mode.md
18-mailbox-notifications.md
19-session-persistence.md
20-hooks-system.md
21-error-recovery.md
README.md
qwen
00-overview.md
01-entry-points.md
02-query-engine.md
03-tools-and-tasks.md
04-commands-and-skills.md
05-state-management.md
06-ink-rendering.md
07-bridge-remote.md
08-mcp-services.md
09-services-overview.md
10-multi-agent.md
11-system-prompt-constants.md
12-tool-interface.md
13-memory-system.md
14-buddy-companion.md
15-keybindings.md
16-stop-hooks.md
17-vim-mode.md
18-upstreamproxy.md
19-cost-tracking-history.md
20-contexts-styles-onboarding.md
21-hooks.md
22-screens.md
tweets-explain
claude-code-memory-analysis.md
compact
memory-system
agentic-architecture
// Provider
<NotificationProvider>
  <App />
</NotificationProvider>

// Usage
const { addNotification } = useNotifications()
addNotification({ type: 'info', message: 'Saved!' })

Used by:

  • Buddy teaser notifications
  • Stop hook errors
  • Plugin installation status
  • Rate limit warnings
  • Settings errors
stats.tsx

StatsStore context for frame timing and performance metrics:

TypeScript
// Provider wraps the app
<StatsProvider>
  <App />
</StatsProvider>

// Track frame time
const { markFrame } = useStats()
markFrame('render_complete')
mailbox.tsx

Message passing between components:

TypeScript
// Send a message
sendMailboxMessage('task_completed', { taskId: 'abc' })

// Subscribe
useMailboxMessage('task_completed', (data) => { ... })
modalContext.tsx

Modal dialog management:

TypeScript
const { openModal, closeModal } = useModal()
openModal(<SettingsDialog />)
overlayContext.tsx / promptOverlayContext.tsx

Overlay UI management for floating panels, tooltips, and prompt overlays.

fpsMetrics.tsx

FPS tracking context for performance monitoring:

TypeScript
const { fps } = useFpsMetrics()
// โ†’ 58 (current FPS)
voice.tsx

Voice mode context provider:

TypeScript
const { isVoiceActive, startListening, stopListening } = useVoice()
QueuedMessageContext.tsx

Message queuing for the REPL โ€” handles queued user messages during processing.


Output Styles (outputStyles/)

Custom output style system for tailoring Claude's behavior.

How It Works

Users create .md files in .claude/output-styles/ or ~/.claude/output-styles/:

Plain text
.claude/output-styles/
โ”œโ”€โ”€ concise.md
โ”œโ”€โ”€ verbose.md
โ””โ”€โ”€ code-focused.md

Each file:

Markdown
---
name: Code-Focused
description: Focus on code, minimize explanation
keep-coding-instructions: true
---

Always provide code in full. Minimize explanations.
Focus on implementation details.
Loading
TypeScript
// Load styles from directories
const styles = await loadOutputStylesDir([
  '~/.claude/output-styles/',
  '.claude/output-styles/',
])
Plugin Styles

Plugins can include styles with force-for-plugin frontmatter:

Markdown
---
name: Plugin Style
force-for-plugin: true
---

Project Onboarding (projectOnboardingState.ts)

Tracks project-specific onboarding steps.

Steps
StepDescriptionCompletable
workspaceCreate/clone a projectNo (informational)
claudemdRun /init to create CLAUDE.mdYes
State
TypeScript
interface ProjectOnboardingState {
  allCompletableStepsDone: boolean
  seenCount: number  // Stops showing after 4 views
}
Memoized Config Checks

Avoids filesystem hits on every render:

TypeScript
// Memoized โ€” only re-checks when settings change
const onboardingConfig = useMemoizedOnboardingConfig()

Dialog Launchers (dialogLaunchers.tsx)

Thin async launchers for one-off dialog JSX components:

TypeScript
// Each function dynamically imports its component
async function showSnapshotUpdateDialog(done) {
  const { SnapshotUpdateDialog } = await import('./SnapshotUpdateDialog')
  render(<SnapshotUpdateDialog onDone={done} />)
}
Dialogs
DialogPurpose
SnapshotUpdateDialogAgent memory snapshot conflicts
InvalidSettingsDialogSettings validation errors
AssistantSessionChooserPick a bridge session
AssistantInstallWizardFirst-time assistant setup
TeleportResumeWrapperTeleport session resume
TeleportRepoMismatchDialogTeleport repo selection
ResumeConversationInteractive session picker

REPL Launcher (replLauncher.tsx)

Thin async launcher that dynamically imports App and REPL components:

TypeScript
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.


Interactive Helpers (interactiveHelpers.tsx)

Core utilities for the interactive REPL startup sequence.

showSetupScreens()

The full onboarding/setup pipeline:

Plain text
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚  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:

  • FPS tracking
  • Stats store
  • Frame timing logging
  • Flicker detection
exitWithError() / exitWithMessage()

Fatal error rendering through Ink:

TypeScript
exitWithError('Failed to initialize', error)
// โ†’ Renders error box in terminal, then exits

Files

FilePurpose
src/context/notifications.tsxNotification system
src/context/stats.tsxStats/performance context
src/context/mailbox.tsxMessage passing
src/context/modalContext.tsxModal dialogs
src/context/overlayContext.tsxOverlay management
src/context/promptOverlayContext.tsxPrompt overlay
src/context/fpsMetrics.tsxFPS tracking
src/context/voice.tsxVoice mode context
src/context/QueuedMessageContext.tsxMessage queuing
src/outputStyles/loadOutputStylesDir.tsOutput style loader
src/projectOnboardingState.tsProject onboarding
src/dialogLaunchers.tsxDialog launchers
src/replLauncher.tsxREPL launcher
src/interactiveHelpers.tsxSetup & rendering utilities