feat(v0.6): Project Manager — repo discovery + Projects panel + tab wiring
Home screen gains a Sessions↔Projects segmented control. The Projects view discovers the host's git repos and, on click, opens a tab named after the repo, spawned in the repo dir, auto-running `claude` (1:N sessions per project). Backend (P2/P4): - src/http/projects.ts — parseGitHead + buildProjects(cfg, liveSessions): depth-capped BFS for .git (skips node_modules/dotdirs/symlinks, stops descending at a repo), .git/HEAD branch parse, rate-limited `git status` dirty check (execFile, no shell, 2s timeout, concurrency 8), merge of ~/.claude/projects cwds (reuses history.listSessions), cwd-prefix session merge (fresh each call), TTL discovery cache with in-flight dedup. - src/server.ts — read-only GET /projects (no Origin guard, []-fallback). Frontend (P5/P6): - public/projects.ts — mountProjects: 1:N cards (branch chip, dirty dot, session rows, "+ start claude here"), live search, localStorage favourites; pure helpers extracted for unit tests. - public/tabs.ts — openProject (#n suffix for dup names, sends 'claude\r'), countOpenWithTitlePrefix, Sessions↔Projects home toggle (updateHomeView). - public/style.css — Projects panel + .home-seg control styles. Config (P3, hardened): PROJECT_ROOTS/SCAN_DEPTH/SCAN_TTL/DIRTY_CHECK already added; this commit adds fail-fast rejection of relative PROJECT_ROOTS. Review hardening (4 confirmed HIGH + boundary validation): - carriage-return fix so claude auto-executes (A3); seg-control z-order; parallelised history merge; concurrent-cache-miss dedup. - normalizeProject guards the /projects response; getFavs filters non-strings. Tests: +57 (398 total). Backend src/http/projects.ts 93.4%, config.ts 98%. Verified: both typechecks clean, full suite green, build:web OK, coverage ≥80×4, real-browser smoke (83 repos, branch/dirty correct, click→claude tab).
This commit is contained in:
Yaojia Wang
271
public/style.css
271
public/style.css
@@ -664,7 +664,7 @@ body {
|
||||
/* ── Launcher (home session chooser, shown when no tab is open) ──── */
|
||||
.launcher {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
inset: 44px 0 0 0; /* top offset reserves space for .home-seg (height ~32px + gap) */
|
||||
overflow-y: auto;
|
||||
padding: 22px 18px 40px;
|
||||
box-sizing: border-box;
|
||||
@@ -872,3 +872,272 @@ body {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── v0.6 Projects panel ─────────────────────────────────────────────────── */
|
||||
|
||||
/* Panel wrapper (same host as .launcher; toggled via display) */
|
||||
.proj-panel {
|
||||
position: absolute;
|
||||
inset: 44px 0 0 0; /* top offset reserves space for .home-seg (height ~32px + gap) */
|
||||
overflow-y: auto;
|
||||
padding: 22px 18px 40px;
|
||||
box-sizing: border-box;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
/* Search box */
|
||||
.proj-search-wrap {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.proj-search {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
padding: 8px 12px;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.proj-search:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px var(--accent-soft);
|
||||
}
|
||||
|
||||
/* Grid — mirrors .mg-grid layout */
|
||||
.proj-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
/* Project card */
|
||||
.proj-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
transition: border-color 0.12s ease;
|
||||
}
|
||||
.proj-card:hover {
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
/* Card header row */
|
||||
.proj-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Repo name */
|
||||
.proj-name {
|
||||
flex: 1 1 auto;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Branch chip */
|
||||
.proj-branch {
|
||||
font-size: 11px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
border-radius: 5px;
|
||||
padding: 2px 7px;
|
||||
white-space: nowrap;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* Dirty indicator (● dot) */
|
||||
.proj-dirty {
|
||||
font-size: 10px;
|
||||
color: var(--amber);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* Meta line (last-active time) */
|
||||
.proj-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
font-family: Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
/* Favourite star toggle */
|
||||
.proj-fav {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-faint);
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
padding: 0 2px;
|
||||
line-height: 1;
|
||||
flex: none;
|
||||
transition: color 0.12s ease;
|
||||
}
|
||||
.proj-fav:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
.proj-fav.on {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Sessions list (1:N) */
|
||||
.proj-sessions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* One running-session row */
|
||||
.proj-session-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-3);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
.proj-session-row:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
/* Status dot on a session row — colours from THEME.md v0.6 note */
|
||||
.proj-session-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex: none;
|
||||
background: var(--text-faint);
|
||||
}
|
||||
.proj-dot-working {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 5px var(--accent-soft);
|
||||
}
|
||||
.proj-dot-waiting {
|
||||
background: var(--amber);
|
||||
}
|
||||
.proj-dot-idle {
|
||||
background: #8b8a86;
|
||||
}
|
||||
.proj-dot-unknown {
|
||||
background: var(--text-faint);
|
||||
}
|
||||
|
||||
/* Session title */
|
||||
.proj-session-title {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Client-count badge (👁 N) */
|
||||
.proj-session-badge {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
background: var(--surface-2);
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* "＋ New" / "＋ start claude here" action button */
|
||||
.proj-new {
|
||||
background: var(--surface-3);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-dim);
|
||||
border-radius: 8px;
|
||||
padding: 7px 12px;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
|
||||
}
|
||||
.proj-new:hover {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
border-color: rgba(227, 166, 74, 0.3);
|
||||
}
|
||||
|
||||
/* Primary action — no sessions yet; full Amber accent button */
|
||||
.proj-new.proj-new-primary {
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
border-color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.proj-new.proj-new-primary:hover {
|
||||
background: var(--accent-2);
|
||||
border-color: var(--accent-2);
|
||||
color: var(--on-accent);
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.proj-empty {
|
||||
color: var(--text-dim);
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Home segmented control (P6 builds the DOM; styles defined here per spec) */
|
||||
|
||||
/* Horizontal pill container, centered above the home grid */
|
||||
.home-seg {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Inactive segment */
|
||||
.home-seg-btn {
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border-strong);
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
padding: 8px 20px;
|
||||
transition: background 0.12s ease, color 0.12s ease;
|
||||
}
|
||||
.home-seg-btn:first-child {
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
.home-seg-btn:last-child {
|
||||
border-radius: 0 20px 20px 0;
|
||||
border-left: none;
|
||||
}
|
||||
.home-seg-btn:only-child {
|
||||
border-radius: 20px;
|
||||
}
|
||||
.home-seg-btn:not(.active):hover {
|
||||
background: var(--surface-3);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Active segment — Amber accent; text uses --on-accent for contrast */
|
||||
.home-seg-btn.active {
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
border-color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.home-seg-btn.active:hover {
|
||||
background: var(--accent-2);
|
||||
border-color: var(--accent-2);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user