@polderlabs/bizar 6.2.4 → 6.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/CLAUDE.md +15 -0
- package/.claude/agents/_shared/AGENT_BASELINE.md +168 -0
- package/.claude/agents/_shared/CLAUDE_TOOLS.md +412 -0
- package/.claude/agents/_shared/SKILLS.md +109 -0
- package/.claude/agents/agent-browser.md +80 -0
- package/.claude/agents/baldr.md +49 -0
- package/.claude/agents/forseti.md +51 -0
- package/.claude/agents/frigg.md +42 -0
- package/.claude/agents/heimdall.md +33 -0
- package/.claude/agents/hermod.md +53 -0
- package/.claude/agents/mimir.md +49 -0
- package/.claude/agents/odin.md +287 -0
- package/.claude/agents/quick.md +34 -0
- package/.claude/agents/semble-search.md +50 -0
- package/.claude/agents/thor.md +53 -0
- package/.claude/agents/tyr.md +56 -0
- package/.claude/agents/vidarr.md +54 -0
- package/.claude/agents/vor.md +53 -0
- package/.claude/commands/audit.md +25 -0
- package/.claude/commands/bizar.md +22 -0
- package/.claude/commands/explain.md +17 -0
- package/.claude/commands/init.md +29 -0
- package/.claude/commands/learn.md +44 -0
- package/.claude/commands/plan.md +35 -0
- package/.claude/commands/plow-through.md +50 -0
- package/.claude/commands/pr-review.md +49 -0
- package/.claude/commands/setup-provider.md +96 -0
- package/.claude/commands/tailscale-serve.md +100 -0
- package/.claude/commands/team.md +132 -0
- package/.claude/commands/test.md +62 -0
- package/.claude/commands/validate.md +68 -0
- package/.claude/commands/visual-plan.md +24 -0
- package/.claude/hooks/README.md +92 -0
- package/.claude/hooks/posttooluse-editwrite.mjs +91 -0
- package/.claude/hooks/pretooluse-bash.mjs +81 -0
- package/.claude/hooks/pretooluse-editwrite.mjs +139 -0
- package/.claude/hooks/sessionend-recall.mjs +74 -0
- package/.claude/hooks/sessionstart-prime.mjs +80 -0
- package/.claude/hooks/userpromptsubmit-tag.mjs +80 -0
- package/.claude/settings.json +116 -0
- package/.claude/skills/9router/SKILL.md +80 -0
- package/.claude/skills/9router-chat/SKILL.md +73 -0
- package/.claude/skills/9router-embeddings/SKILL.md +69 -0
- package/.claude/skills/9router-image/SKILL.md +86 -0
- package/.claude/skills/9router-stt/SKILL.md +79 -0
- package/.claude/skills/9router-tts/SKILL.md +80 -0
- package/.claude/skills/9router-web-fetch/SKILL.md +99 -0
- package/.claude/skills/9router-web-search/SKILL.md +91 -0
- package/.claude/skills/bizar/README.md +9 -0
- package/.claude/skills/bizar/SKILL.md +450 -0
- package/.claude/skills/cpp-coding-standards/README.md +28 -0
- package/.claude/skills/cpp-coding-standards/SKILL.md +634 -0
- package/.claude/skills/cpp-coding-standards/references/concurrency.md +320 -0
- package/.claude/skills/cpp-coding-standards/references/error-handling.md +229 -0
- package/.claude/skills/cpp-coding-standards/references/memory-safety.md +216 -0
- package/.claude/skills/cpp-coding-standards/references/modern-idioms.md +282 -0
- package/.claude/skills/cpp-coding-standards/references/review-checklist.md +96 -0
- package/.claude/skills/cpp-testing/README.md +28 -0
- package/.claude/skills/cpp-testing/SKILL.md +304 -0
- package/.claude/skills/cpp-testing/references/coverage.md +370 -0
- package/.claude/skills/cpp-testing/references/framework-compare.md +175 -0
- package/.claude/skills/cpp-testing/references/host-test-for-embedded.md +499 -0
- package/.claude/skills/cpp-testing/references/mocking.md +364 -0
- package/.claude/skills/cpp-testing/references/tdd-workflow.md +308 -0
- package/.claude/skills/cubesandbox/SKILL.md +148 -0
- package/.claude/skills/embedded-esp-idf/README.md +41 -0
- package/.claude/skills/embedded-esp-idf/SKILL.md +439 -0
- package/.claude/skills/embedded-esp-idf/references/freertos-patterns.md +214 -0
- package/.claude/skills/embedded-esp-idf/references/host-tests.md +164 -0
- package/.claude/skills/embedded-esp-idf/references/idf-py-commands.md +157 -0
- package/.claude/skills/embedded-esp-idf/references/kconfig.md +159 -0
- package/.claude/skills/embedded-esp-idf/references/logging-discipline.md +118 -0
- package/.claude/skills/embedded-esp-idf/references/memory-and-iram.md +137 -0
- package/.claude/skills/embedded-esp-idf/references/nvs.md +121 -0
- package/.claude/skills/embedded-esp-idf/references/packed-structs.md +192 -0
- package/.claude/skills/embedded-esp-idf/scripts/idf_env.sh +47 -0
- package/.claude/skills/embedded-esp-idf/scripts/size_check.sh +77 -0
- package/.claude/skills/glyph/SKILL.md +163 -0
- package/.claude/skills/harness-engineering/SKILL.md +143 -0
- package/.claude/skills/lightrag/SKILL.md +81 -0
- package/.claude/skills/memory-protocol/SKILL.md +105 -0
- package/.claude/skills/obsidian/SKILL.md +306 -0
- package/.claude/skills/read-the-damn-docs/SKILL.md +113 -0
- package/.claude/skills/self-improvement/SKILL.md +64 -0
- package/README.md +87 -59
- package/bizar-dash/dist/assets/{EnvVarsSection-DXM8gRm_.js → EnvVarsSection-B58aiJiE.js} +1 -1
- package/bizar-dash/dist/assets/{EnvVarsSection-DXM8gRm_.js.map → EnvVarsSection-B58aiJiE.js.map} +1 -1
- package/bizar-dash/dist/assets/{MobileChat-BnKN_Ks_.js → MobileChat-BJrqwVDd.js} +1 -1
- package/bizar-dash/dist/assets/{MobileChat-BnKN_Ks_.js.map → MobileChat-BJrqwVDd.js.map} +1 -1
- package/bizar-dash/dist/assets/{MobileSettings-DjCPxC-Q.js → MobileSettings-CEQNJNLJ.js} +1 -1
- package/bizar-dash/dist/assets/{MobileSettings-DjCPxC-Q.js.map → MobileSettings-CEQNJNLJ.js.map} +1 -1
- package/bizar-dash/dist/assets/{main-DYiZqMrn.js → main-IvfQAOfy.js} +1 -1
- package/bizar-dash/dist/assets/{main-DYiZqMrn.js.map → main-IvfQAOfy.js.map} +1 -1
- package/bizar-dash/dist/assets/{markdown-C6mXtQxD.js → markdown-tOLaD6nm.js} +1 -1
- package/bizar-dash/dist/assets/{markdown-C6mXtQxD.js.map → markdown-tOLaD6nm.js.map} +1 -1
- package/bizar-dash/dist/assets/{mobile-CMHqtLV2.js → mobile-DYCHcUpq.js} +1 -1
- package/bizar-dash/dist/assets/{mobile-CMHqtLV2.js.map → mobile-DYCHcUpq.js.map} +1 -1
- package/bizar-dash/dist/assets/{mobile-layout-3jIhHX_p.js → mobile-layout-CBHjpwsb.js} +2 -2
- package/bizar-dash/dist/assets/{mobile-layout-3jIhHX_p.js.map → mobile-layout-CBHjpwsb.js.map} +1 -1
- package/bizar-dash/dist/assets/{useSlashCommands-DtITw8Xv.js → useSlashCommands-Bd7_FA6U.js} +2 -2
- package/bizar-dash/dist/assets/{useSlashCommands-DtITw8Xv.js.map → useSlashCommands-Bd7_FA6U.js.map} +1 -1
- package/bizar-dash/dist/assets/{vendor-CeHGtduv.js → vendor-C843201K.js} +12 -12
- package/bizar-dash/dist/assets/vendor-C843201K.js.map +1 -0
- package/bizar-dash/dist/index.html +6 -6
- package/bizar-dash/dist/mobile.html +2 -2
- package/bizar-dash/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json +1 -1
- package/bizar-dash/src/server/api.mjs +4 -4
- package/bizar-dash/src/server/background-store.mjs +15 -16
- package/bizar-dash/src/server/bg-poller.mjs +25 -35
- package/bizar-dash/src/server/bg-retry.mjs +66 -194
- package/bizar-dash/src/server/claude-bg-spawner.mjs +390 -0
- package/bizar-dash/src/server/claude-info.mjs +412 -0
- package/bizar-dash/src/server/{cline-runner.mjs → claude-runner.mjs} +53 -48
- package/bizar-dash/src/server/claude-sdk.mjs +191 -0
- package/bizar-dash/src/server/providers-store.mjs +22 -49
- package/bizar-dash/src/server/routes/background.mjs +24 -20
- package/bizar-dash/src/server/routes/chat.mjs +223 -326
- package/bizar-dash/src/server/routes/claude-session-detail.mjs +329 -0
- package/bizar-dash/src/server/routes/claude-sessions.mjs +259 -0
- package/bizar-dash/src/server/routes/tasks.mjs +20 -28
- package/bizar-dash/src/server/task-delegator.mjs +76 -77
- package/bizar-dash/src/web/components/chat/useChat.ts +23 -27
- package/bizar-dash/src/web/views/Chat.tsx +8 -8
- package/cli/bin.mjs +31 -18
- package/cli/commands/claude-cmd.mjs +348 -0
- package/cli/commands/install.mjs +12 -11
- package/cli/commands/sandbox.mjs +220 -0
- package/cli/commands/validate.mjs +252 -288
- package/cli/dev-link.test.mjs +11 -11
- package/cli/doctor.mjs +131 -213
- package/cli/install.mjs +33 -37
- package/cli/install.test.mjs +9 -9
- package/cli/provision-claude.mjs +893 -0
- package/cli/provision.mjs +330 -226
- package/cli/provision.test.mjs +102 -0
- package/cli/utils.mjs +72 -58
- package/config/AGENTS.md +28 -28
- package/config/agents/_shared/AGENT_BASELINE.md +104 -684
- package/config/skills/bizar/SKILL.md +197 -0
- package/config/skills/cubesandbox/SKILL.md +148 -0
- package/config/skills/harness-engineering/SKILL.md +142 -0
- package/install.sh +66 -44
- package/package.json +19 -11
- package/packages/sdk/ARCHITECTURE.md +40 -36
- package/packages/sdk/package-lock.json +32 -0
- package/packages/sdk/package.json +15 -5
- package/{plugins/bizar → packages/sdk}/src/dangerous-patterns.ts +6 -28
- package/packages/sdk/src/fingerprint.ts +0 -0
- package/packages/sdk/src/index.ts +38 -73
- package/packages/sdk/src/mcp/bin.ts +51 -0
- package/packages/sdk/src/mcp/server.ts +498 -0
- package/{plugins/bizar/src/memory-vault.ts → packages/sdk/src/memory/index.ts} +18 -21
- package/packages/sdk/tests/sdk.test.mjs +148 -0
- package/packages/sdk/vitest.config.ts +1 -1
- package/scripts/bh-full-e2e.mjs +166 -363
- package/scripts/check-deps.mjs +28 -46
- package/scripts/mirror-claude-md.sh +78 -0
- package/scripts/test-in-container.sh +157 -0
- package/templates/clean-state-checklist.md +3 -3
- package/templates/sprint-contract.md +2 -2
- package/bizar-dash/.bizar/activity.log +0 -3
- package/bizar-dash/.omx/logs/omx-2026-07-07.jsonl +0 -1
- package/bizar-dash/.omx/state/session.json +0 -10
- package/bizar-dash/bizar-design/EXPLANATION.md +0 -307
- package/bizar-dash/bizar-design/INSTRUCTIONS.md +0 -149
- package/bizar-dash/bizar-design/canvas.html +0 -281
- package/bizar-dash/bizar-design/canvas.html.artifact.json +0 -19
- package/bizar-dash/bizar-design/components.css +0 -1665
- package/bizar-dash/bizar-design/components.html +0 -557
- package/bizar-dash/bizar-design/components.html.artifact.json +0 -19
- package/bizar-dash/bizar-design/desktop/agents.html +0 -74
- package/bizar-dash/bizar-design/desktop/agents.html.artifact.json +0 -19
- package/bizar-dash/bizar-design/desktop/memory.html +0 -75
- package/bizar-dash/bizar-design/desktop/memory.html.artifact.json +0 -19
- package/bizar-dash/bizar-design/desktop/metrics.html +0 -63
- package/bizar-dash/bizar-design/desktop/metrics.html.artifact.json +0 -19
- package/bizar-dash/bizar-design/desktop/overview.html +0 -95
- package/bizar-dash/bizar-design/desktop/overview.html.artifact.json +0 -19
- package/bizar-dash/bizar-design/desktop/settings.html +0 -70
- package/bizar-dash/bizar-design/desktop/settings.html.artifact.json +0 -19
- package/bizar-dash/bizar-design/icons.svg +0 -44
- package/bizar-dash/bizar-design/index.html +0 -192
- package/bizar-dash/bizar-design/index.html.artifact.json +0 -19
- package/bizar-dash/bizar-design/mobile/agents.html +0 -29
- package/bizar-dash/bizar-design/mobile/agents.html.artifact.json +0 -19
- package/bizar-dash/bizar-design/mobile/memory.html +0 -28
- package/bizar-dash/bizar-design/mobile/memory.html.artifact.json +0 -19
- package/bizar-dash/bizar-design/mobile/metrics.html +0 -29
- package/bizar-dash/bizar-design/mobile/metrics.html.artifact.json +0 -19
- package/bizar-dash/bizar-design/mobile/overview.html +0 -33
- package/bizar-dash/bizar-design/mobile/overview.html.artifact.json +0 -19
- package/bizar-dash/bizar-design/mobile/settings.html +0 -28
- package/bizar-dash/bizar-design/mobile/settings.html.artifact.json +0 -19
- package/bizar-dash/bizar-design/prototype.js +0 -114
- package/bizar-dash/bizar-design/tokens.css +0 -106
- package/bizar-dash/dist/assets/vendor-CeHGtduv.js.map +0 -1
- package/bizar-dash/node_modules/.package-lock.json +0 -6
- package/bizar-dash/package-lock.json +0 -6
- package/bizar-dash/src/server/cline-sdk.mjs +0 -132
- package/bizar-dash/src/server/routes/cline-session-detail.mjs +0 -559
- package/bizar-dash/src/server/routes/cline-sessions.mjs +0 -291
- package/cli/commands/cline-cmd.mjs +0 -289
- package/cli/commands/validate.test.mjs +0 -344
- package/cli/doctor.test.mjs +0 -350
- package/config/cline.json.template +0 -342
- package/packages/sdk/src/client.ts +0 -188
- package/packages/sdk/src/cline-events.ts +0 -134
- package/packages/sdk/src/cline-types.ts +0 -66
- package/packages/sdk/src/cline.ts +0 -339
- package/packages/sdk/src/errors.ts +0 -129
- package/packages/sdk/src/events.ts +0 -153
- package/packages/sdk/src/types.ts +0 -176
- package/packages/sdk/tests/client.test.ts +0 -217
- package/packages/sdk/tests/errors.test.ts +0 -108
- package/packages/sdk/tests/events.test.ts +0 -139
- package/packages/sdk/tests/fixtures/fetch-mock.ts +0 -152
- package/packages/sdk/tests/fixtures/sse-mock.ts +0 -30
- package/plugins/bizar/ARCHITECTURE.md +0 -142
- package/plugins/bizar/CONSTRAINTS.md +0 -67
- package/plugins/bizar/LICENSE +0 -21
- package/plugins/bizar/README.md +0 -448
- package/plugins/bizar/index.ts +0 -872
- package/plugins/bizar/package.json +0 -39
- package/plugins/bizar/scripts/check-forbidden-imports.sh +0 -33
- package/plugins/bizar/src/background-state.ts +0 -641
- package/plugins/bizar/src/background.ts +0 -1806
- package/plugins/bizar/src/cline-runner.ts +0 -203
- package/plugins/bizar/src/clineruntime.ts +0 -227
- package/plugins/bizar/src/commands-impl.ts +0 -151
- package/plugins/bizar/src/commands.ts +0 -1799
- package/plugins/bizar/src/compaction.d.mts +0 -48
- package/plugins/bizar/src/compaction.mjs +0 -192
- package/plugins/bizar/src/dashboard-client.ts +0 -233
- package/plugins/bizar/src/event-stream.ts +0 -606
- package/plugins/bizar/src/fingerprint.ts +0 -120
- package/plugins/bizar/src/handoff.ts +0 -79
- package/plugins/bizar/src/hooks/memory-flush-on-compact.ts +0 -123
- package/plugins/bizar/src/hooks/memory-inject.ts +0 -247
- package/plugins/bizar/src/hooks/memory-write-on-end.ts +0 -188
- package/plugins/bizar/src/hooks/skill-curator.ts +0 -180
- package/plugins/bizar/src/http-client.ts +0 -467
- package/plugins/bizar/src/key-rotation.ts +0 -218
- package/plugins/bizar/src/logger.ts +0 -144
- package/plugins/bizar/src/loop-engineering.ts +0 -241
- package/plugins/bizar/src/loop.ts +0 -176
- package/plugins/bizar/src/mistake-recovery.ts +0 -98
- package/plugins/bizar/src/odin.ts +0 -227
- package/plugins/bizar/src/options.ts +0 -470
- package/plugins/bizar/src/plan-fs.ts +0 -323
- package/plugins/bizar/src/reasoning-clean.ts +0 -454
- package/plugins/bizar/src/report.ts +0 -178
- package/plugins/bizar/src/research-prompt.ts +0 -35
- package/plugins/bizar/src/serve-info.ts +0 -228
- package/plugins/bizar/src/serve.ts +0 -496
- package/plugins/bizar/src/settings.ts +0 -349
- package/plugins/bizar/src/state.ts +0 -298
- package/plugins/bizar/src/tool-discipline.ts +0 -105
- package/plugins/bizar/src/tools/agent-browser.ts +0 -315
- package/plugins/bizar/src/tools/bg-collect.ts +0 -131
- package/plugins/bizar/src/tools/bg-get-comments.ts +0 -266
- package/plugins/bizar/src/tools/bg-kill.ts +0 -116
- package/plugins/bizar/src/tools/bg-pause.ts +0 -99
- package/plugins/bizar/src/tools/bg-report-progress.ts +0 -115
- package/plugins/bizar/src/tools/bg-resume.ts +0 -94
- package/plugins/bizar/src/tools/bg-send-message.ts +0 -223
- package/plugins/bizar/src/tools/bg-spawn.ts +0 -502
- package/plugins/bizar/src/tools/bg-status.ts +0 -130
- package/plugins/bizar/src/tools/graph-query.ts +0 -278
- package/plugins/bizar/src/tools/loop-engineering.ts +0 -193
- package/plugins/bizar/src/tools/memory-list.ts +0 -43
- package/plugins/bizar/src/tools/memory-read.ts +0 -69
- package/plugins/bizar/src/tools/memory-search.ts +0 -47
- package/plugins/bizar/src/tools/memory-write.ts +0 -54
- package/plugins/bizar/src/tools/open-kb.ts +0 -198
- package/plugins/bizar/src/tools/plan-action.ts +0 -785
- package/plugins/bizar/src/tools/read-glyph-feedback.ts +0 -191
- package/plugins/bizar/src/tools/team-spawn.ts +0 -73
- package/plugins/bizar/src/tools/team-status.ts +0 -76
- package/plugins/bizar/src/tools/wait-for-feedback.ts +0 -415
- package/plugins/bizar/src/trajectory.ts +0 -104
- package/plugins/bizar/tests/README.md +0 -99
- package/plugins/bizar/tests/attach-handler-bug.test.ts +0 -169
- package/plugins/bizar/tests/background-state.test.ts +0 -277
- package/plugins/bizar/tests/background.test.ts +0 -402
- package/plugins/bizar/tests/block.test.ts +0 -195
- package/plugins/bizar/tests/canonical-key-order.test.ts +0 -75
- package/plugins/bizar/tests/clineruntime-config.test.ts +0 -283
- package/plugins/bizar/tests/commands-impl.test.ts +0 -316
- package/plugins/bizar/tests/commands.test.ts +0 -584
- package/plugins/bizar/tests/compaction.test.ts +0 -264
- package/plugins/bizar/tests/config.test.ts +0 -128
- package/plugins/bizar/tests/dashboard-client.test.ts +0 -159
- package/plugins/bizar/tests/dispose.test.ts +0 -336
- package/plugins/bizar/tests/event-stream.test.ts +0 -409
- package/plugins/bizar/tests/event.test.ts +0 -262
- package/plugins/bizar/tests/fingerprint.test.ts +0 -162
- package/plugins/bizar/tests/http-client.test.ts +0 -404
- package/plugins/bizar/tests/init-helpers.test.ts +0 -203
- package/plugins/bizar/tests/integration/slash-command.test.ts +0 -349
- package/plugins/bizar/tests/integration/tool-routing.test.ts +0 -98
- package/plugins/bizar/tests/key-rotation.test.ts +0 -396
- package/plugins/bizar/tests/loop-engineering.test.ts +0 -168
- package/plugins/bizar/tests/loop.test.ts +0 -397
- package/plugins/bizar/tests/memory-write-on-end.test.ts +0 -92
- package/plugins/bizar/tests/mistake-recovery.test.ts +0 -116
- package/plugins/bizar/tests/odin.test.ts +0 -125
- package/plugins/bizar/tests/options.test.ts +0 -329
- package/plugins/bizar/tests/reasoning-clean.test.ts +0 -422
- package/plugins/bizar/tests/safety.test.ts +0 -256
- package/plugins/bizar/tests/serve.test.ts +0 -339
- package/plugins/bizar/tests/settings.test.ts +0 -351
- package/plugins/bizar/tests/stall-think.test.ts +0 -750
- package/plugins/bizar/tests/state.test.ts +0 -276
- package/plugins/bizar/tests/tool-discipline.test.ts +0 -77
- package/plugins/bizar/tests/tools/agent-browser.test.ts +0 -98
- package/plugins/bizar/tests/tools/bg-collect.test.ts +0 -337
- package/plugins/bizar/tests/tools/bg-get-comments.test.ts +0 -485
- package/plugins/bizar/tests/tools/bg-kill.test.ts +0 -235
- package/plugins/bizar/tests/tools/bg-pause.test.ts +0 -61
- package/plugins/bizar/tests/tools/bg-report-progress.test.ts +0 -79
- package/plugins/bizar/tests/tools/bg-resume.test.ts +0 -40
- package/plugins/bizar/tests/tools/bg-send-message.test.ts +0 -116
- package/plugins/bizar/tests/tools/bg-spawn-delegation.test.ts +0 -147
- package/plugins/bizar/tests/tools/bg-spawn-http.test.ts +0 -233
- package/plugins/bizar/tests/tools/bg-spawn.test.ts +0 -311
- package/plugins/bizar/tests/tools/bg-status.test.ts +0 -217
- package/plugins/bizar/tests/tools/cline-runner.test.ts +0 -115
- package/plugins/bizar/tests/tools/plan-action.test.ts +0 -599
- package/plugins/bizar/tests/tools/read-glyph-feedback.test.ts +0 -253
- package/plugins/bizar/tests/tools/wait-for-feedback.test.ts +0 -390
- package/plugins/bizar/tests/update-deadlock.test.ts +0 -151
- package/plugins/bizar/tsconfig.json +0 -29
|
@@ -1,557 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>Bizar Agent Console System</title>
|
|
7
|
-
<link rel="stylesheet" href="./tokens.css">
|
|
8
|
-
<link rel="stylesheet" href="./components.css">
|
|
9
|
-
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<div class="design-shell has-sidebar">
|
|
12
|
-
<header class="shell-topbar" data-od-id="components-topbar">
|
|
13
|
-
<div class="shell-topbar-start">
|
|
14
|
-
<div class="brand-mark">
|
|
15
|
-
<div class="brand-glyph">B</div>
|
|
16
|
-
<div class="brand-copy">
|
|
17
|
-
<strong>Agent Console System</strong>
|
|
18
|
-
<span>Source-of-truth component library</span>
|
|
19
|
-
</div>
|
|
20
|
-
</div>
|
|
21
|
-
<nav class="topbar-nav" aria-label="Design package">
|
|
22
|
-
<a class="section-tab" href="./index.html"><svg class="nav-icon"><use href="./icons.svg#icon-link"></use></svg><span>Launcher</span></a>
|
|
23
|
-
<a class="section-tab" href="./canvas.html"><svg class="nav-icon"><use href="./icons.svg#icon-canvas"></use></svg><span>Canvas</span></a>
|
|
24
|
-
<a class="section-tab is-active" href="./components.html"><svg class="nav-icon"><use href="./icons.svg#icon-components"></use></svg><span>Components</span></a>
|
|
25
|
-
</nav>
|
|
26
|
-
</div>
|
|
27
|
-
<div class="shell-topbar-center">
|
|
28
|
-
<div class="project-pill mono">console system · components first</div>
|
|
29
|
-
</div>
|
|
30
|
-
<div class="shell-topbar-end">
|
|
31
|
-
<button class="button" data-theme-toggle>Theme</button>
|
|
32
|
-
</div>
|
|
33
|
-
</header>
|
|
34
|
-
|
|
35
|
-
<div class="shell-body">
|
|
36
|
-
<aside class="sidebar shell-sidebar" data-od-id="components-sidebar">
|
|
37
|
-
<div class="sidebar-header">
|
|
38
|
-
<button class="nav-button sidebar-toggle" data-sidebar-toggle title="Toggle sidebar">
|
|
39
|
-
<svg class="nav-icon"><use href="./icons.svg#icon-link"></use></svg>
|
|
40
|
-
<span class="nav-link-copy">
|
|
41
|
-
<span class="nav-link-label">Toggle sidebar</span>
|
|
42
|
-
<span class="nav-link-meta">Cmd/Ctrl+B</span>
|
|
43
|
-
</span>
|
|
44
|
-
</button>
|
|
45
|
-
<div class="sidebar-title">
|
|
46
|
-
<svg class="nav-icon"><use href="./icons.svg#icon-components"></use></svg>
|
|
47
|
-
<span class="sidebar-title-text">Library map</span>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
<div class="shell-sidebar-body">
|
|
51
|
-
<div class="sidebar-group">
|
|
52
|
-
<div class="sidebar-group-label">Foundations</div>
|
|
53
|
-
<nav class="sidebar-nav">
|
|
54
|
-
<a class="nav-link is-active" href="#overview" title="Overview"><svg class="nav-icon"><use href="./icons.svg#icon-overview"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Overview</span><span class="nav-link-meta">System</span></span></a>
|
|
55
|
-
<a class="nav-link" href="#theming" title="Theming"><svg class="nav-icon"><use href="./icons.svg#icon-canvas"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Theming</span><span class="nav-link-meta">Tokens</span></span></a>
|
|
56
|
-
<a class="nav-link" href="#chrome" title="Chrome"><svg class="nav-icon"><use href="./icons.svg#icon-link"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Chrome</span><span class="nav-link-meta">Shell</span></span></a>
|
|
57
|
-
</nav>
|
|
58
|
-
</div>
|
|
59
|
-
<div class="sidebar-group">
|
|
60
|
-
<div class="sidebar-group-label">Components</div>
|
|
61
|
-
<nav class="sidebar-nav">
|
|
62
|
-
<a class="nav-link" href="#actions" title="Actions"><svg class="nav-icon"><use href="./icons.svg#icon-tasks"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Actions</span><span class="nav-link-meta">Buttons</span></span></a>
|
|
63
|
-
<a class="nav-link" href="#status" title="Status"><svg class="nav-icon"><use href="./icons.svg#icon-activity"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Status</span><span class="nav-link-meta">Pills</span></span></a>
|
|
64
|
-
<a class="nav-link" href="#data" title="Data"><svg class="nav-icon"><use href="./icons.svg#icon-metrics"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Data</span><span class="nav-link-meta">Tables, charts</span></span></a>
|
|
65
|
-
<a class="nav-link" href="#product-modules" title="Product modules"><svg class="nav-icon"><use href="./icons.svg#icon-chat"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Product modules</span><span class="nav-link-meta">Chat, memory, settings</span></span></a>
|
|
66
|
-
<a class="nav-link" href="#states" title="States"><svg class="nav-icon"><use href="./icons.svg#icon-agents"></use></svg><span class="nav-link-copy"><span class="nav-link-label">States</span><span class="nav-link-meta">Loading, empty, error</span></span></a>
|
|
67
|
-
</nav>
|
|
68
|
-
</div>
|
|
69
|
-
<div class="sidebar-group">
|
|
70
|
-
<div class="sidebar-group-label">Behavior</div>
|
|
71
|
-
<nav class="sidebar-nav">
|
|
72
|
-
<a class="nav-link" href="#behavior" title="Interaction rules"><svg class="nav-icon"><use href="./icons.svg#icon-settings"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Interaction rules</span><span class="nav-link-meta">Scroll, hover, drag</span></span></a>
|
|
73
|
-
</nav>
|
|
74
|
-
</div>
|
|
75
|
-
</div>
|
|
76
|
-
</aside>
|
|
77
|
-
|
|
78
|
-
<main class="workspace">
|
|
79
|
-
<div class="workspace-header" data-od-id="components-header" id="overview">
|
|
80
|
-
<div>
|
|
81
|
-
<p class="eyebrow">Source of truth</p>
|
|
82
|
-
<h1 class="page-title">Professional agent console design system</h1>
|
|
83
|
-
<p class="page-subtitle">
|
|
84
|
-
This page defines the visual system for controlling and configuring agents: flat
|
|
85
|
-
charcoal surfaces, restrained green signals, compact settings density, quiet borders,
|
|
86
|
-
and reusable operator components. The attached reference images are the source of truth;
|
|
87
|
-
the example pages should be assembled from these parts.
|
|
88
|
-
</p>
|
|
89
|
-
</div>
|
|
90
|
-
<div class="toolbar">
|
|
91
|
-
<a class="button" href="./canvas.html">Open canvas</a>
|
|
92
|
-
<a class="button is-primary" href="./desktop/overview.html">Open desktop screens</a>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
<div class="section-tabs" data-od-id="components-jump">
|
|
97
|
-
<a class="section-tab" href="./desktop/overview.html"><svg class="nav-icon"><use href="./icons.svg#icon-desktop"></use></svg><span>Desktop references</span></a>
|
|
98
|
-
<a class="section-tab" href="./mobile/overview.html"><svg class="nav-icon"><use href="./icons.svg#icon-mobile"></use></svg><span>Mobile references</span></a>
|
|
99
|
-
<a class="section-tab" href="#behavior"><svg class="nav-icon"><use href="./icons.svg#icon-settings"></use></svg><span>Behavior rules</span></a>
|
|
100
|
-
</div>
|
|
101
|
-
|
|
102
|
-
<section class="card" data-od-id="overview-summary">
|
|
103
|
-
<div class="card-header">
|
|
104
|
-
<div>
|
|
105
|
-
<h2 class="card-title">Console posture</h2>
|
|
106
|
-
<p class="card-meta">Functional, technical, and calm. Use hierarchy, borders, and spacing for structure instead of gradients, glows, or ornamental chrome.</p>
|
|
107
|
-
</div>
|
|
108
|
-
<span class="pill accent">single accent</span>
|
|
109
|
-
</div>
|
|
110
|
-
<div class="card-body three-column">
|
|
111
|
-
<div class="mini-card"><h4>Components first</h4><p>Every page example should be assembled from the primitives in this file, not styled independently.</p></div>
|
|
112
|
-
<div class="mini-card"><h4>Readable state</h4><p>Health, pause, error, review, and streaming states must be visible through labels, layout, and subtle accent use.</p></div>
|
|
113
|
-
<div class="mini-card"><h4>Operational tone</h4><p>Build for configuration, inspection, and intervention. Keep the UI quiet and legible under sustained use.</p></div>
|
|
114
|
-
</div>
|
|
115
|
-
</section>
|
|
116
|
-
|
|
117
|
-
<section class="card" style="margin-top: var(--space-4);" data-od-id="theming-section" id="theming">
|
|
118
|
-
<div class="card-header">
|
|
119
|
-
<div>
|
|
120
|
-
<h2 class="card-title">Theming and tokens</h2>
|
|
121
|
-
<p class="card-meta">The reference images define the direction: dark neutral console surfaces, restrained green accent, light borders, settings-style hierarchy, and minimal depth.</p>
|
|
122
|
-
</div>
|
|
123
|
-
</div>
|
|
124
|
-
<div class="card-body stack">
|
|
125
|
-
<div class="theme-preview">
|
|
126
|
-
<div class="split-label"><span>Dark token palette</span><span class="mono">OKLch-based</span></div>
|
|
127
|
-
<div class="theme-strip">
|
|
128
|
-
<div class="theme-chip" style="background: var(--bg);"></div>
|
|
129
|
-
<div class="theme-chip" style="background: var(--bg-elev);"></div>
|
|
130
|
-
<div class="theme-chip" style="background: var(--bg-elev-2);"></div>
|
|
131
|
-
<div class="theme-chip" style="background: var(--accent);"></div>
|
|
132
|
-
<div class="theme-chip" style="background: var(--success);"></div>
|
|
133
|
-
<div class="theme-chip" style="background: var(--warning);"></div>
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
<div class="token-grid">
|
|
137
|
-
<div class="surface">
|
|
138
|
-
<h3 class="card-title">Color tokens</h3>
|
|
139
|
-
<table class="table compact">
|
|
140
|
-
<tbody>
|
|
141
|
-
<tr><td>Canvas</td><td class="mono">--bg</td></tr>
|
|
142
|
-
<tr><td>Primary surface</td><td class="mono">--bg-elev</td></tr>
|
|
143
|
-
<tr><td>Nested surface</td><td class="mono">--bg-elev-2</td></tr>
|
|
144
|
-
<tr><td>Accent</td><td class="mono">--accent</td></tr>
|
|
145
|
-
<tr><td>Success / warning / error / info</td><td class="mono">--success … --info</td></tr>
|
|
146
|
-
</tbody>
|
|
147
|
-
</table>
|
|
148
|
-
</div>
|
|
149
|
-
<div class="surface">
|
|
150
|
-
<h3 class="card-title">Type and motion</h3>
|
|
151
|
-
<table class="table compact">
|
|
152
|
-
<tbody>
|
|
153
|
-
<tr><td>Sans stack</td><td class="mono">Inter var</td></tr>
|
|
154
|
-
<tr><td>Mono stack</td><td class="mono">JetBrains Mono</td></tr>
|
|
155
|
-
<tr><td>Display / title / body / meta</td><td class="mono">--fs-display … --fs-meta</td></tr>
|
|
156
|
-
<tr><td>Motion</td><td class="mono">120ms / 200ms / 320ms</td></tr>
|
|
157
|
-
<tr><td>Depth discipline</td><td class="mono">flat surfaces · borders first</td></tr>
|
|
158
|
-
</tbody>
|
|
159
|
-
</table>
|
|
160
|
-
</div>
|
|
161
|
-
</div>
|
|
162
|
-
<div class="pattern-grid">
|
|
163
|
-
<div class="surface soft">
|
|
164
|
-
<h3 class="card-title">Spacing and radius rules</h3>
|
|
165
|
-
<p class="card-meta">Compact, even, and repeatable. The system should feel engineered, not illustrated.</p>
|
|
166
|
-
<div class="cluster">
|
|
167
|
-
<span class="pill">space-2</span><span class="pill">space-3</span><span class="pill">space-4</span><span class="pill">radius</span><span class="pill">radius-lg</span>
|
|
168
|
-
</div>
|
|
169
|
-
</div>
|
|
170
|
-
<div class="surface soft">
|
|
171
|
-
<h3 class="card-title">Theme switching contract</h3>
|
|
172
|
-
<p class="card-meta">Dark is primary. Light is a token mirror for documentation and implementation parity only.</p>
|
|
173
|
-
<div class="cluster">
|
|
174
|
-
<span class="pill success">dark default</span>
|
|
175
|
-
<span class="pill info">light mirror</span>
|
|
176
|
-
</div>
|
|
177
|
-
</div>
|
|
178
|
-
</div>
|
|
179
|
-
</div>
|
|
180
|
-
</section>
|
|
181
|
-
|
|
182
|
-
<section class="card" style="margin-top: var(--space-4);" data-od-id="chrome-section" id="chrome">
|
|
183
|
-
<div class="card-header">
|
|
184
|
-
<div>
|
|
185
|
-
<h2 class="card-title">Shell and chrome</h2>
|
|
186
|
-
<p class="card-meta">Topbar, nav rail, tabs, pills, search triggers, and scaffolding should match the product-console references, not a marketing dashboard.</p>
|
|
187
|
-
</div>
|
|
188
|
-
</div>
|
|
189
|
-
<div class="card-body stack">
|
|
190
|
-
<div class="surface">
|
|
191
|
-
<div class="cluster">
|
|
192
|
-
<span class="project-pill mono">project · bizar-harness</span>
|
|
193
|
-
<span class="runtime-pill mono">ws · live</span>
|
|
194
|
-
<span class="runtime-pill mono" style="color: var(--success);">cline · active</span>
|
|
195
|
-
<button class="button">Search</button>
|
|
196
|
-
</div>
|
|
197
|
-
</div>
|
|
198
|
-
<div class="pattern-grid">
|
|
199
|
-
<div class="surface soft">
|
|
200
|
-
<h3 class="card-title">Expandable sidebar</h3>
|
|
201
|
-
<p class="card-meta">Use a compact icon rail by default and expand only when the operator needs labels and secondary navigation context, similar to the reference settings shells.</p>
|
|
202
|
-
<div class="cluster">
|
|
203
|
-
<a class="nav-link is-active" href="#"><svg class="nav-icon"><use href="./icons.svg#icon-overview"></use></svg><span class="nav-link-copy"><span class="nav-link-label">Overview</span><span class="nav-link-meta">Home</span></span></a>
|
|
204
|
-
</div>
|
|
205
|
-
</div>
|
|
206
|
-
<div class="surface soft">
|
|
207
|
-
<h3 class="card-title">Tab and segmented controls</h3>
|
|
208
|
-
<div class="tab-strip">
|
|
209
|
-
<span class="tab is-active">Overview</span>
|
|
210
|
-
<span class="tab">Agents</span>
|
|
211
|
-
<span class="tab">Memory</span>
|
|
212
|
-
</div>
|
|
213
|
-
<div class="segmented" style="margin-top: var(--space-3);">
|
|
214
|
-
<span class="segmented-item is-active">24h</span>
|
|
215
|
-
<span class="segmented-item">7d</span>
|
|
216
|
-
<span class="segmented-item">30d</span>
|
|
217
|
-
</div>
|
|
218
|
-
</div>
|
|
219
|
-
</div>
|
|
220
|
-
</div>
|
|
221
|
-
</section>
|
|
222
|
-
|
|
223
|
-
<section class="card" style="margin-top: var(--space-4);" data-od-id="actions-section" id="actions">
|
|
224
|
-
<div class="card-header">
|
|
225
|
-
<div>
|
|
226
|
-
<h2 class="card-title">Actions and form primitives</h2>
|
|
227
|
-
<p class="card-meta">Buttons, text inputs, selects, textareas, grouped form layouts, and configuration rows.</p>
|
|
228
|
-
</div>
|
|
229
|
-
</div>
|
|
230
|
-
<div class="card-body stack">
|
|
231
|
-
<div class="cluster">
|
|
232
|
-
<button class="button">Default</button>
|
|
233
|
-
<button class="button is-primary">Primary</button>
|
|
234
|
-
<button class="button is-success">Success</button>
|
|
235
|
-
<button class="button is-danger">Danger</button>
|
|
236
|
-
<button class="button is-ghost">Ghost</button>
|
|
237
|
-
</div>
|
|
238
|
-
<div class="form-grid">
|
|
239
|
-
<div class="field"><label>Search</label><input class="input" value="Find sessions" readonly></div>
|
|
240
|
-
<div class="field"><label>Provider</label><select class="select"><option>Anthropic</option></select></div>
|
|
241
|
-
<div class="field"><label>Summary</label><textarea class="textarea">Use grouped settings blocks for long forms and keep labels terse.</textarea></div>
|
|
242
|
-
</div>
|
|
243
|
-
</div>
|
|
244
|
-
</section>
|
|
245
|
-
|
|
246
|
-
<section class="card" style="margin-top: var(--space-4);" data-od-id="status-section" id="status">
|
|
247
|
-
<div class="card-header">
|
|
248
|
-
<div>
|
|
249
|
-
<h2 class="card-title">Status, badges, identity</h2>
|
|
250
|
-
<p class="card-meta">Pills, dots, avatars, and status rows must be shared building blocks.</p>
|
|
251
|
-
</div>
|
|
252
|
-
</div>
|
|
253
|
-
<div class="card-body stack">
|
|
254
|
-
<div class="cluster">
|
|
255
|
-
<span class="pill accent"><span class="dot"></span> active</span>
|
|
256
|
-
<span class="pill success"><span class="dot"></span> healthy</span>
|
|
257
|
-
<span class="pill warning"><span class="dot"></span> review</span>
|
|
258
|
-
<span class="pill error"><span class="dot"></span> error</span>
|
|
259
|
-
<span class="pill info"><span class="dot"></span> info</span>
|
|
260
|
-
<span class="avatar">OD</span>
|
|
261
|
-
</div>
|
|
262
|
-
<div class="status-grid">
|
|
263
|
-
<div class="mini-card"><h4>Runtime</h4><p class="mono">active</p></div>
|
|
264
|
-
<div class="mini-card"><h4>Memory</h4><p class="mono">healthy</p></div>
|
|
265
|
-
<div class="mini-card"><h4>Approvals</h4><p class="mono">2 waiting</p></div>
|
|
266
|
-
<div class="mini-card"><h4>Tokens</h4><p class="mono">1.42M/hr</p></div>
|
|
267
|
-
</div>
|
|
268
|
-
</div>
|
|
269
|
-
</section>
|
|
270
|
-
|
|
271
|
-
<section class="card" style="margin-top: var(--space-4);" data-od-id="data-section" id="data">
|
|
272
|
-
<div class="card-header">
|
|
273
|
-
<div>
|
|
274
|
-
<h2 class="card-title">Data presentation</h2>
|
|
275
|
-
<p class="card-meta">Use dense but calm data blocks: slim charts, compact tables, row queues, and comparison layouts that stay readable at a glance.</p>
|
|
276
|
-
</div>
|
|
277
|
-
</div>
|
|
278
|
-
<div class="card-body stack">
|
|
279
|
-
<div class="hero-metrics">
|
|
280
|
-
<div class="card"><div class="card-body metric"><span class="pill accent">tokens / hour</span><div class="metric-value mono">1.42M</div><div class="metric-delta up mono">+12.4%</div></div></div>
|
|
281
|
-
<div class="card"><div class="card-body metric"><span class="pill">latency</span><div class="metric-value mono">842ms</div><div class="metric-delta mono">p95 1.32s</div></div></div>
|
|
282
|
-
<div class="card"><div class="card-body metric"><span class="pill warning">error rate</span><div class="metric-value mono">0.21%</div><div class="metric-delta mono">2 degraded</div></div></div>
|
|
283
|
-
<div class="card"><div class="card-body metric"><span class="pill success">cost / hour</span><div class="metric-value mono">$1.84</div><div class="metric-delta mono">within plan</div></div></div>
|
|
284
|
-
</div>
|
|
285
|
-
<div class="two-column">
|
|
286
|
-
<div class="surface">
|
|
287
|
-
<h3 class="card-title">Timeline / activity</h3>
|
|
288
|
-
<div class="timeline" style="margin-top: var(--space-3);">
|
|
289
|
-
<div class="timeline-entry"><div class="mono">09:43</div><div><h4>Thor resumed memory reindex</h4><p>Chunk cache restored after Git sync.</p></div><span class="pill success">ok</span></div>
|
|
290
|
-
<div class="timeline-entry"><div class="mono">09:38</div><div><h4>Odin requested approval</h4><p>Token normalization across shell components.</p></div><span class="pill warning">review</span></div>
|
|
291
|
-
</div>
|
|
292
|
-
</div>
|
|
293
|
-
<div class="surface">
|
|
294
|
-
<h3 class="card-title">Chart / breakdown</h3>
|
|
295
|
-
<div class="sparkline" style="margin-top: var(--space-3);">
|
|
296
|
-
<svg class="chart-svg" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true">
|
|
297
|
-
<path class="chart-area" d="M0 30 L0 23.5 L10 21.4 L20 20.9 L30 17.8 L40 18.3 L50 14.2 L60 12.1 L70 13.8 L80 11.3 L90 9.8 L100 11.2 L100 30 Z"></path>
|
|
298
|
-
<path class="chart-line secondary" d="M0 22.2 L10 21.6 L20 20.8 L30 19.4 L40 18.6 L50 17.3 L60 15.6 L70 15.4 L80 14.1 L90 12.8 L100 12.4"></path>
|
|
299
|
-
<path class="chart-line" d="M0 23.5 L10 21.4 L20 20.9 L30 17.8 L40 18.3 L50 14.2 L60 12.1 L70 13.8 L80 11.3 L90 9.8 L100 11.2"></path>
|
|
300
|
-
<circle class="chart-point" cx="80" cy="11.3" r="0.95"></circle>
|
|
301
|
-
<circle class="chart-point" cx="90" cy="9.8" r="0.95"></circle>
|
|
302
|
-
</svg>
|
|
303
|
-
</div>
|
|
304
|
-
<div class="chart-legend">
|
|
305
|
-
<span class="chart-legend-item"><span class="legend-swatch" style="color: var(--accent);"></span>token volume</span>
|
|
306
|
-
<span class="chart-legend-item"><span class="legend-swatch secondary"></span>budget baseline</span>
|
|
307
|
-
</div>
|
|
308
|
-
<div class="chart-axis"><span>00h</span><span>06h</span><span>12h</span><span>18h</span><span>24h</span></div>
|
|
309
|
-
<div class="chart-summary">
|
|
310
|
-
<div class="chart-summary-item"><span class="micro-label">peak</span><span class="chart-summary-value mono">1.82M/h</span></div>
|
|
311
|
-
<div class="chart-summary-item"><span class="micro-label">current</span><span class="chart-summary-value mono">1.42M/h</span></div>
|
|
312
|
-
<div class="chart-summary-item"><span class="micro-label">variance</span><span class="chart-summary-value mono">+12.4%</span></div>
|
|
313
|
-
</div>
|
|
314
|
-
</div>
|
|
315
|
-
</div>
|
|
316
|
-
<div class="surface">
|
|
317
|
-
<h3 class="card-title">Technical table</h3>
|
|
318
|
-
<table class="table" style="margin-top: var(--space-3);">
|
|
319
|
-
<thead><tr><th>Model</th><th>Requests</th><th>Tokens</th><th>Cost</th></tr></thead>
|
|
320
|
-
<tbody>
|
|
321
|
-
<tr><td>claude-sonnet</td><td class="mono">4,822</td><td class="mono">12.8M</td><td class="mono">$18.22</td></tr>
|
|
322
|
-
<tr><td>minimax-m3</td><td class="mono">2,110</td><td class="mono">8.1M</td><td class="mono">$7.84</td></tr>
|
|
323
|
-
<tr><td>claude-haiku</td><td class="mono">1,104</td><td class="mono">2.4M</td><td class="mono">$1.39</td></tr>
|
|
324
|
-
</tbody>
|
|
325
|
-
</table>
|
|
326
|
-
</div>
|
|
327
|
-
<div class="three-column">
|
|
328
|
-
<div class="surface soft">
|
|
329
|
-
<h3 class="card-title">Comparison bars</h3>
|
|
330
|
-
<div class="stack" style="margin-top: var(--space-3);">
|
|
331
|
-
<div class="mini-card"><div class="split-label"><span>claude-sonnet</span><span class="mono">47%</span></div><div class="bar-track" style="margin-top: var(--space-2);"><div class="bar-fill" style="width: 47%;"></div></div></div>
|
|
332
|
-
<div class="mini-card"><div class="split-label"><span>minimax-m3</span><span class="mono">31%</span></div><div class="bar-track" style="margin-top: var(--space-2);"><div class="bar-fill info" style="width: 31%;"></div></div></div>
|
|
333
|
-
</div>
|
|
334
|
-
</div>
|
|
335
|
-
<div class="surface soft">
|
|
336
|
-
<h3 class="card-title">Inline stat strip</h3>
|
|
337
|
-
<div class="metric-strip" style="margin-top: var(--space-3);">
|
|
338
|
-
<div class="micro-stat"><span class="micro-label">p50</span><span class="micro-stat-value mono">842ms</span></div>
|
|
339
|
-
<div class="micro-stat"><span class="micro-label">p95</span><span class="micro-stat-value mono">1.32s</span></div>
|
|
340
|
-
<div class="micro-stat"><span class="micro-label">err</span><span class="micro-stat-value mono">0.21%</span></div>
|
|
341
|
-
</div>
|
|
342
|
-
</div>
|
|
343
|
-
<div class="surface soft">
|
|
344
|
-
<h3 class="card-title">Dense row summary</h3>
|
|
345
|
-
<div class="density-list" style="margin-top: var(--space-3);">
|
|
346
|
-
<div class="density-row"><span class="pill accent">hot</span><div><p class="title">chat.send</p><p class="meta">38% of total token output</p></div><span class="mono">1.02M</span></div>
|
|
347
|
-
<div class="density-row"><span class="pill">cold</span><div><p class="title">artifact.open</p><p class="meta">Low volume but high operator value</p></div><span class="mono">88k</span></div>
|
|
348
|
-
</div>
|
|
349
|
-
</div>
|
|
350
|
-
</div>
|
|
351
|
-
</div>
|
|
352
|
-
</section>
|
|
353
|
-
|
|
354
|
-
<section class="card" style="margin-top: var(--space-4);" data-od-id="product-modules-section" id="product-modules">
|
|
355
|
-
<div class="card-header">
|
|
356
|
-
<div>
|
|
357
|
-
<h2 class="card-title">Product modules</h2>
|
|
358
|
-
<p class="card-meta">These are the real console modules: chat, memory, approvals, settings, queues, and inspection surfaces. Pages should be composed from them directly.</p>
|
|
359
|
-
</div>
|
|
360
|
-
</div>
|
|
361
|
-
<div class="card-body stack">
|
|
362
|
-
<div class="chat-grid">
|
|
363
|
-
<div class="card session-list">
|
|
364
|
-
<div class="card-header"><h3 class="card-title">Chat rail</h3></div>
|
|
365
|
-
<div class="card-body stack">
|
|
366
|
-
<div class="session-row is-active"><span class="dot" style="color: var(--accent);"></span><div><h4>design-system follow-up</h4><p class="mono">09:42 · cline</p></div><span class="pill accent">3</span></div>
|
|
367
|
-
<div class="session-row"><span class="dot" style="color: var(--warning);"></span><div><h4>memory route audit</h4><p class="mono">09:21 · awaiting</p></div><span class="pill">1</span></div>
|
|
368
|
-
</div>
|
|
369
|
-
</div>
|
|
370
|
-
<div class="card thread">
|
|
371
|
-
<div class="card-header"><div><h3 class="card-title">Thread</h3><p class="card-meta">source badge + action-rich composer</p></div><span class="pill success">streaming</span></div>
|
|
372
|
-
<div class="card-body stack">
|
|
373
|
-
<div class="message assistant">Reusable chat modules should preserve the three-column shell while letting each region scroll independently.</div>
|
|
374
|
-
<div class="message mono" style="margin-left: auto;">Keep the thread dominant. Info chrome supports it.</div>
|
|
375
|
-
<div class="composer"><div class="field"><label>Composer</label><textarea class="textarea">Add files, commands, and send actions here.</textarea></div></div>
|
|
376
|
-
</div>
|
|
377
|
-
</div>
|
|
378
|
-
<div class="card info-panel">
|
|
379
|
-
<div class="card-header"><h3 class="card-title">Info panel</h3></div>
|
|
380
|
-
<div class="card-body stack">
|
|
381
|
-
<div class="mini-card"><h4>Agent</h4><p>odin · open-design</p></div>
|
|
382
|
-
<div class="mini-card"><h4>Token budget</h4><div class="bar-track" style="margin-top: var(--space-2);"><div class="bar-fill" style="width: 72%;"></div></div></div>
|
|
383
|
-
<div class="mini-card"><h4>Actions</h4><div class="cluster" style="margin-top: var(--space-2);"><button class="button">Rename</button><button class="button">Export</button></div></div>
|
|
384
|
-
</div>
|
|
385
|
-
</div>
|
|
386
|
-
</div>
|
|
387
|
-
<div class="module-grid">
|
|
388
|
-
<div class="surface">
|
|
389
|
-
<h3 class="card-title">Memory module</h3>
|
|
390
|
-
<div class="stack" style="margin-top: var(--space-3);">
|
|
391
|
-
<div class="mini-card"><h4>Source rail</h4><p>Overview, LightRAG, Obsidian, Git sync, Semantic, Config.</p></div>
|
|
392
|
-
<div class="mini-card"><h4>Health hero</h4><p>Notes, entities, pending sync, median query.</p></div>
|
|
393
|
-
<div class="mini-card"><h4>Graph and details</h4><p>Knowledge graph pane plus source-specific modules.</p></div>
|
|
394
|
-
</div>
|
|
395
|
-
</div>
|
|
396
|
-
<div class="surface">
|
|
397
|
-
<h3 class="card-title">Settings module</h3>
|
|
398
|
-
<div class="stack" style="margin-top: var(--space-3);">
|
|
399
|
-
<div class="mini-card"><h4>Sticky section nav</h4><p>Theme, Layout, Agents, Background, System LLM, Workspaces.</p></div>
|
|
400
|
-
<div class="mini-card"><h4>Grouped fields</h4><p>Each block needs clear labels, terse helper text, and consistent action rows.</p></div>
|
|
401
|
-
</div>
|
|
402
|
-
</div>
|
|
403
|
-
</div>
|
|
404
|
-
<div class="three-column">
|
|
405
|
-
<div class="surface">
|
|
406
|
-
<h3 class="card-title">Approvals queue</h3>
|
|
407
|
-
<div class="queue-list" style="margin-top: var(--space-3);">
|
|
408
|
-
<div class="queue-row"><span class="pill warning">review</span><div><p class="title">Settings token cleanup</p><p class="meta">3 files · design-shell parity</p></div><button class="button is-primary">Approve</button></div>
|
|
409
|
-
<div class="queue-row"><span class="pill">steer</span><div><p class="title">Doctor export copy pass</p><p class="meta">plans/debug-plan/doctor-audit.md</p></div><button class="button">Steer</button></div>
|
|
410
|
-
</div>
|
|
411
|
-
</div>
|
|
412
|
-
<div class="surface">
|
|
413
|
-
<h3 class="card-title">Agent queue</h3>
|
|
414
|
-
<div class="queue-list" style="margin-top: var(--space-3);">
|
|
415
|
-
<div class="queue-row"><span class="pill success">running</span><div><p class="title">odin · synthesis</p><p class="meta">4m12s · open design</p></div><button class="button">Pause</button></div>
|
|
416
|
-
<div class="queue-row"><span class="pill error">stuck</span><div><p class="title">mimir · graph rebuild</p><p class="meta">310s since stdout</p></div><button class="button is-danger">Retry</button></div>
|
|
417
|
-
</div>
|
|
418
|
-
</div>
|
|
419
|
-
<div class="surface">
|
|
420
|
-
<h3 class="card-title">Inspector block</h3>
|
|
421
|
-
<div class="stack" style="margin-top: var(--space-3);">
|
|
422
|
-
<div class="mini-card"><h4>Owner</h4><p class="mono">thor · route doctor</p></div>
|
|
423
|
-
<div class="mini-card"><h4>Budget</h4><p class="mono">72% consumed · 1.4M tokens</p></div>
|
|
424
|
-
<div class="mini-card"><h4>Next step</h4><p>Resume after fixture refresh or steer to alternate provider.</p></div>
|
|
425
|
-
</div>
|
|
426
|
-
</div>
|
|
427
|
-
</div>
|
|
428
|
-
<div class="kanban">
|
|
429
|
-
<div class="kanban-column"><h3 class="card-title">Backlog</h3><div class="mini-card">Operator polish pass</div><div class="mini-card">Memory graph hover states</div></div>
|
|
430
|
-
<div class="kanban-column"><h3 class="card-title">In progress</h3><div class="mini-card drag-card">Design package rewrite</div></div>
|
|
431
|
-
<div class="kanban-column"><h3 class="card-title">Review</h3><div class="mini-card">Settings density audit</div></div>
|
|
432
|
-
<div class="kanban-column"><h3 class="card-title">Done</h3><div class="mini-card">Chat shell contract</div></div>
|
|
433
|
-
</div>
|
|
434
|
-
</div>
|
|
435
|
-
</section>
|
|
436
|
-
|
|
437
|
-
<section class="card" style="margin-top: var(--space-4);" data-od-id="overlay-section">
|
|
438
|
-
<div class="card-header">
|
|
439
|
-
<div>
|
|
440
|
-
<h2 class="card-title">Overlays and secondary surfaces</h2>
|
|
441
|
-
<p class="card-meta">Dialogs, drawers, banners, and command surfaces stay flat and quiet. They support decision-making rather than stealing attention.</p>
|
|
442
|
-
</div>
|
|
443
|
-
</div>
|
|
444
|
-
<div class="card-body pattern-grid">
|
|
445
|
-
<div class="modal-demo">
|
|
446
|
-
<h3 class="card-title">Modal</h3>
|
|
447
|
-
<p class="card-meta">Use for destructive confirmations and compact, focused forms.</p>
|
|
448
|
-
<div class="cluster"><button class="button">Cancel</button><button class="button is-primary">Confirm</button></div>
|
|
449
|
-
</div>
|
|
450
|
-
<div class="drawer">
|
|
451
|
-
<h3 class="card-title">Drawer</h3>
|
|
452
|
-
<p class="card-meta">Use for supplemental detail, filters, or secondary editing tasks.</p>
|
|
453
|
-
<div class="mini-card"><h4>Inspector block</h4><p>Metadata, quick actions, or advanced filters.</p></div>
|
|
454
|
-
</div>
|
|
455
|
-
</div>
|
|
456
|
-
<div class="card-body three-column">
|
|
457
|
-
<div class="surface soft">
|
|
458
|
-
<h3 class="card-title">Command surface</h3>
|
|
459
|
-
<div class="canvas-command" style="margin-top: var(--space-3);">
|
|
460
|
-
<div class="terminal-line"><span>⌘K</span><span>Search sessions and memory</span></div>
|
|
461
|
-
<div class="terminal-line"><span>⌘B</span><span>Toggle sidebar rail</span></div>
|
|
462
|
-
<div class="terminal-line"><span>⌘↵</span><span>Send active composer</span></div>
|
|
463
|
-
</div>
|
|
464
|
-
</div>
|
|
465
|
-
<div class="surface soft">
|
|
466
|
-
<h3 class="card-title">Toast / inline status</h3>
|
|
467
|
-
<div class="stack" style="margin-top: var(--space-3);">
|
|
468
|
-
<div class="mini-card"><span class="pill success">saved</span><p style="margin-top: var(--space-2);">Theme tokens synchronized across shell components.</p></div>
|
|
469
|
-
<div class="mini-card"><span class="pill warning">pending</span><p style="margin-top: var(--space-2);">Approval required before writing to shared styles.</p></div>
|
|
470
|
-
</div>
|
|
471
|
-
</div>
|
|
472
|
-
<div class="surface soft">
|
|
473
|
-
<h3 class="card-title">Banner / interruption</h3>
|
|
474
|
-
<div class="doc-note" style="margin-top: var(--space-3);">Memory sync degraded. Preserve working context, offer retry, and avoid hiding the failure behind a toast only.</div>
|
|
475
|
-
</div>
|
|
476
|
-
</div>
|
|
477
|
-
</section>
|
|
478
|
-
|
|
479
|
-
<section class="card" style="margin-top: var(--space-4);" data-od-id="states-section" id="states">
|
|
480
|
-
<div class="card-header">
|
|
481
|
-
<div>
|
|
482
|
-
<h2 class="card-title">Loading, empty, error, and drag states</h2>
|
|
483
|
-
<p class="card-meta">Every module should have explicit fallback states, not blank space.</p>
|
|
484
|
-
</div>
|
|
485
|
-
</div>
|
|
486
|
-
<div class="card-body behavior-grid">
|
|
487
|
-
<div class="loading-state">
|
|
488
|
-
<h3 class="card-title">Loading</h3>
|
|
489
|
-
<div class="loading-bar"></div>
|
|
490
|
-
<p class="card-meta">Use progress bars or pulse rows instead of blocking spinners where possible.</p>
|
|
491
|
-
</div>
|
|
492
|
-
<div class="empty-state">
|
|
493
|
-
<h3 class="card-title">Empty</h3>
|
|
494
|
-
<p class="card-meta">Explain what is missing and what the operator can do next.</p>
|
|
495
|
-
<button class="button is-primary">Create first item</button>
|
|
496
|
-
</div>
|
|
497
|
-
<div class="error-state">
|
|
498
|
-
<h3 class="card-title">Error</h3>
|
|
499
|
-
<p class="card-meta">Surface clear recovery actions and preserve the failed context.</p>
|
|
500
|
-
<button class="button is-danger">Retry sync</button>
|
|
501
|
-
</div>
|
|
502
|
-
</div>
|
|
503
|
-
<div class="card-body pattern-grid">
|
|
504
|
-
<div class="surface soft">
|
|
505
|
-
<h3 class="card-title">Drag preview</h3>
|
|
506
|
-
<div class="mini-card drag-card" style="margin-top: var(--space-3);">Card being dragged</div>
|
|
507
|
-
</div>
|
|
508
|
-
<div class="surface soft">
|
|
509
|
-
<h3 class="card-title">Drop zone</h3>
|
|
510
|
-
<div class="drop-zone" style="margin-top: var(--space-3);">Drop task, file, or component here</div>
|
|
511
|
-
</div>
|
|
512
|
-
</div>
|
|
513
|
-
</section>
|
|
514
|
-
|
|
515
|
-
<section class="card" style="margin-top: var(--space-4);" data-od-id="behavior-section" id="behavior">
|
|
516
|
-
<div class="card-header">
|
|
517
|
-
<div>
|
|
518
|
-
<h2 class="card-title">Behavior rules</h2>
|
|
519
|
-
<p class="card-meta">These are interaction contracts, not optional suggestions.</p>
|
|
520
|
-
</div>
|
|
521
|
-
</div>
|
|
522
|
-
<div class="card-body behavior-grid">
|
|
523
|
-
<div class="surface">
|
|
524
|
-
<h3 class="card-title">Scrolling</h3>
|
|
525
|
-
<div class="demo-scroll">
|
|
526
|
-
<p class="card-meta">Each major region scrolls independently. Preserve headers and actions. Avoid page-level horizontal scroll. Use sticky subheaders when context would otherwise be lost.</p>
|
|
527
|
-
<p class="card-meta">Chat rail, thread, and info panel scroll separately. Long settings pages keep section nav visible. Tables should prefer internal scroll over widening the shell.</p>
|
|
528
|
-
</div>
|
|
529
|
-
</div>
|
|
530
|
-
<div class="surface">
|
|
531
|
-
<h3 class="card-title">Hover and focus</h3>
|
|
532
|
-
<p class="card-meta">Hover reveals affordance, not surprise. Borders strengthen, surfaces lift one tier, labels clarify. Focus uses shared accent glow, never custom ad hoc outlines.</p>
|
|
533
|
-
</div>
|
|
534
|
-
<div class="surface">
|
|
535
|
-
<h3 class="card-title">Click and selection</h3>
|
|
536
|
-
<p class="card-meta">Clickable rows get large targets and visible active states. Primary clicks select, secondary clicks or kebab menus expose row actions. Never hide critical actions behind hover-only states.</p>
|
|
537
|
-
</div>
|
|
538
|
-
<div class="surface">
|
|
539
|
-
<h3 class="card-title">Drag and drop</h3>
|
|
540
|
-
<p class="card-meta">Dragged items get accent-border outlines and elevated shadows. Drop targets switch to dashed active states. Preserve insertion feedback and keyboard alternatives for reorder actions.</p>
|
|
541
|
-
</div>
|
|
542
|
-
<div class="surface">
|
|
543
|
-
<h3 class="card-title">Loading and streaming</h3>
|
|
544
|
-
<p class="card-meta">Streaming states stay inline with the live content region. Use bars, pulse rows, or dot activity instead of blocking full-screen spinners for local updates.</p>
|
|
545
|
-
</div>
|
|
546
|
-
<div class="surface">
|
|
547
|
-
<h3 class="card-title">Responsive behavior</h3>
|
|
548
|
-
<p class="card-meta">Desktop preserves density and multi-column context. Mobile reorganizes modules into stacked flows, never tiny desktop cards centered in a phone frame.</p>
|
|
549
|
-
</div>
|
|
550
|
-
</div>
|
|
551
|
-
</section>
|
|
552
|
-
</main>
|
|
553
|
-
</div>
|
|
554
|
-
</div>
|
|
555
|
-
<script src="./prototype.js"></script>
|
|
556
|
-
</body>
|
|
557
|
-
</html>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 1,
|
|
3
|
-
"kind": "html",
|
|
4
|
-
"title": "bizar-design/components.html",
|
|
5
|
-
"entry": "bizar-design/components.html",
|
|
6
|
-
"renderer": "html",
|
|
7
|
-
"status": "complete",
|
|
8
|
-
"exports": [
|
|
9
|
-
"html",
|
|
10
|
-
"pdf",
|
|
11
|
-
"zip"
|
|
12
|
-
],
|
|
13
|
-
"createdAt": "2026-07-08T01:03:29.294Z",
|
|
14
|
-
"updatedAt": "2026-07-08T01:03:29.294Z",
|
|
15
|
-
"metadata": {
|
|
16
|
-
"inferred": true,
|
|
17
|
-
"reconciled": true
|
|
18
|
-
}
|
|
19
|
-
}
|