feat(dashboard): "Connect Claude Code to cix" onboarding card on home#62
Merged
Merged
Conversation
…home
Add a collapsible step-by-step card on the dashboard home page that walks a
new user from zero to seeing the cix skills in Claude Code:
1. Install the cix CLI (curl installer)
2. Connect the CLI to this server (links to API Keys, shows the live
per-host connect command)
3. Add the plugin marketplace + install in Claude Code
4. (Optional) index a local project — skippable for workspace / external-
project-only users; cix status alone still verifies the connection
5. See the cix slash commands / skills appear
Collapse state persists in localStorage (expanded by default). Commands use
one-click copy buttons with the secure-context clipboard + execCommand
fallback for HTTP deploys.
Extract the per-host alias / connect-command derivation into
lib/cixServer.ts (cixServerAlias, cixConnectCommand) and reuse it in both the
card and the API-key popup so the two never drift. Add a reusable lib/useCopy
hook for the new components.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
The dashboard home page had no onboarding flow. A new user had to piece together several disjoint steps from the README and the API-Keys popup to wire cix into Claude Code. This adds a single step-by-step card on the home page that takes the user from zero to "I can see the cix skills in Claude Code".
What changed
A collapsible "Connect Claude Code to cix" card on the home page, between the server-status strip and the Modules grid:
curl … install.sh | bashcix config set …command for this deployment/plugin marketplace add dvcdsys/code-index,/plugin install cix@code-index,/reload-pluginscix statusalone still verifies the connection; links to Workspaces/Projects/cix:search,/cix:def,/cix:refs, … as the finish linelocalStorage(expanded by default).execCommandfallback for HTTP deploys).Files
lib/cixServer.ts(new) —cixServerAlias+cixConnectCommand, extracted fromCreateApiKeyDialogand reused by both the card and the dialog so the two never drift.lib/useCopy.ts(new) — reusable clipboard hook with HTTP fallback.modules/home/CommandBlock.tsx(new) — copyable mono command block.modules/home/ConnectClaudeCodeCard.tsx(new) — the card.modules/home/HomePage.tsx,modules/api-keys/components/CreateApiKeyDialog.tsx— wired up / switched to the shared helper.Frontend-only; no server/API/auth changes. Build artifacts under
internal/httpapi/dashboard/dist/stay gitignored (CI rebuilds viamake dashboard-build).Verification
tsc -bclean;make dashboard-buildsucceeds (Vite);.gitkeeppreserved anddist/stays gitignored./api-keys,/workspaces,/projects) confirmed present in the module registry.Follow-ups (out of scope)
CreateApiKeyDialog,ManagedTunnelsPage,SyncSettingsCard,AddRepoDialog) onto the newuseCopyhook.🤖 Generated with Claude Code