feat(P2): redesign all 7 utility screens per spec#71
Merged
Conversation
Replaces the legacy Tailwind-flavored markup in Sessions / Plugins / Skills / Permissions / MCP / Settings / About with design-aligned layouts built on a new shared Screen + Card + Row + SectionTitle component set in src/components/Screen.tsx. Each screen now: - Mounts a chat-header with crumb + actions (no more .legacy-screen wrapper) - Body uses Cards with optional title + actions header - Uses real design tokens (var(--bg-2), --line, --brand-tint, etc.) instead of dead bg-bg/text-fg classes that don't render in the new CSS Screen-by-screen highlights: About - Centered hero with BrandMark size="lg" + gradient text "DeepCode" + version line - Diagnostics card with Status + Paths sections (DeepSeek API, project folder, base URL, ~/.deepcode/* paths) - Documentation links card opening external URLs via plugin-opener Sessions - Search input + new-session button in header - Card with full sessions list, hover state, file size + relative time, click-to-resume Plugins - "Install new plugin" card (still surfaces "wire in v0.2" UX feedback — actual install not piped to renderer yet) - "Installed" card with trust badges (official=ok, marketplace=info, user=warn), hook contributions, source hash, and a custom Toggle switch (not styled native checkbox) Skills - 2-column layout: left list with filter + source badge, right detail card with SKILL.md preview in mono pre Permissions - 5 official mode options exposed in defaultMode row - "Add rule" card with type dropdown + pattern input + Enter-to-add - One card per kind (deny/ask/allow) with badge-tinted header, remove-row ✕ buttons - Save button persists to ~/.deepcode/settings.json (was previously view-only stub) MCP - Connected servers card with status badges (●connected / ✕failed / ○disabled), tool count, inline error tail - Example settings JSON card for copying Settings - GUI / JSON view toggle in header (segmented control) - GUI view: Quick reference card (project / settings path / model / effort / baseURL) + filterable flat key/value table - JSON view: full-width <textarea> with live parse validation; inline error banner if invalid - Save button writes back to user-level settings.json Also fixed App.tsx to drop the .legacy-screen wrapper for these seven screens, since each now mounts its own header. Bundle size holds at 356 KB. All workspace typecheck + 533 tests pass. Co-Authored-By: Claude Opus 4.7 (1M context) <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.
Phase 2 of the design-system rollout. After P1 redid the Onboarding / Sidebar / Chat surfaces, this PR brings the remaining seven utility screens (Sessions / Plugins / Skills / Permissions / MCP / Settings / About) onto the same shell.
Shared primitives
New
src/components/Screen.tsx:Screen— header (crumb + actions) + scrollable body, mounts inside.chat-mainCard— bordered card with optional title + actions header (brand-tinted)Row— label / hint / value grid for diagnosticsSectionTitle— small uppercase divider for inside-card groupingScreens
BrandMark size=lg, diagnostics (DeepSeek API, project folder, paths), docs links via plugin-openerApp-level
.legacy-screenwrapper for all seven — each screen mounts its ownchat-header, matching ReplScreenTest plan
pnpm typecheckclean (7 workspaces)pnpm test— 533+ tests passpnpm --filter @deepcode/desktop buildsucceeds (bundle 356 KB)🤖 Generated with Claude Code