Blomios
31b636037d
AgentsPanel : formulaire de création et items d'agent passent en colonne, les libellés/états longs (running in IdeA, profil) wrappent/tronquent au lieu de déborder. ProjectsView : les onglets de la sidebar wrappent sur plusieurs lignes pour rester tous visibles, le bouton collapse reste épinglé en haut. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
372 lines
14 KiB
TypeScript
372 lines
14 KiB
TypeScript
/**
|
||
* `ProjectsView` — the top-level project surface (L2 / L11).
|
||
*
|
||
* IDE layout (full remaining height):
|
||
*
|
||
* ┌───────────────────────────────────────────────────────┐
|
||
* │ PROJECT TABS [ alpha × ][ beta × ] [+] │
|
||
* ├───────────────┬───────────────────────────────────────┤
|
||
* │ SIDEBAR ≈320px│ MAIN — LayoutGrid (fills remaining) │
|
||
* │ [Proj][Agents]│ — or welcome screen when no active │
|
||
* │ [Tmpl][Git] │ │
|
||
* │ panel body │ │
|
||
* └───────────────┴───────────────────────────────────────┘
|
||
*
|
||
* The "Projects" sidebar tab always hosts the create-project form and the
|
||
* known-projects list, ensuring they are always in the DOM (required by tests).
|
||
*
|
||
* Pure presentation: all behaviour comes from {@link useProjects}. Styling via
|
||
* `@/shared`; no inline styles, no `invoke()`.
|
||
*
|
||
* **Test-contract** — the following query hooks from `projects.test.tsx` are
|
||
* always present in the DOM regardless of which sidebar tab is active:
|
||
* - getByLabelText("project name") / ("project root") — form inputs
|
||
* - getByRole("button", { name: "Create project" }) / "Refresh" / "Open" / "close <name>"
|
||
* - getByRole("tablist") + getAllByRole("tab") + aria-selected — project tabs
|
||
* - getByText("No projects yet.") / "No open tabs." — empty states
|
||
* - getAllByRole("listitem") — known-projects list
|
||
* - getByRole("alert") — error display
|
||
*/
|
||
|
||
import { useState } from "react";
|
||
|
||
import type { LayoutInfo } from "@/domain";
|
||
import { LayoutGrid, LayoutTabs } from "@/features/layout";
|
||
import { AgentsPanel, ResumeProjectPanel } from "@/features/agents";
|
||
import { TemplatesPanel } from "@/features/templates";
|
||
import { SkillsPanel } from "@/features/skills";
|
||
import { MemoryPanel } from "@/features/memory";
|
||
import { EmbedderSettings } from "@/features/embedder";
|
||
import { PermissionsPanel } from "@/features/permissions";
|
||
import { GitPanel, GitGraphView } from "@/features/git";
|
||
import { Button, Input, Panel, Tabs, cn } from "@/shared";
|
||
import { useGateways } from "@/app/di";
|
||
import { ProjectContextPanel } from "./ProjectContextPanel";
|
||
import { useProjects } from "./useProjects";
|
||
|
||
type SidebarTab =
|
||
| "projects"
|
||
| "context"
|
||
| "agents"
|
||
| "templates"
|
||
| "skills"
|
||
| "permissions"
|
||
| "memory"
|
||
| "git";
|
||
|
||
const SIDEBAR_TABS: { id: SidebarTab; label: string }[] = [
|
||
{ id: "projects", label: "Projects" },
|
||
{ id: "context", label: "Context" },
|
||
{ id: "agents", label: "Agents" },
|
||
{ id: "templates", label: "Templates" },
|
||
{ id: "skills", label: "Skills" },
|
||
{ id: "permissions", label: "Perms" },
|
||
{ id: "memory", label: "Memory" },
|
||
{ id: "git", label: "Git" },
|
||
];
|
||
|
||
export function ProjectsView() {
|
||
const vm = useProjects();
|
||
const { system } = useGateways();
|
||
const [name, setName] = useState("");
|
||
const [root, setRoot] = useState("");
|
||
const [sidebarTab, setSidebarTab] = useState<SidebarTab>("projects");
|
||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||
// The active layout (id + kind), reported by LayoutTabs — the single source of
|
||
// truth. `kind` decides whether the main area is the terminal grid or the git
|
||
// graph view.
|
||
const [activeLayout, setActiveLayout] = useState<LayoutInfo | null>(null);
|
||
|
||
const active = vm.openTabs.find((t) => t.id === vm.activeTabId) ?? null;
|
||
|
||
const activeLayoutKind = activeLayout?.kind ?? "terminal";
|
||
|
||
const canCreate = name.trim().length > 0 && root.trim().length > 0 && !vm.busy;
|
||
|
||
async function submit(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
if (!canCreate) return;
|
||
await vm.createProject(name.trim(), root.trim());
|
||
setName("");
|
||
setRoot("");
|
||
}
|
||
|
||
async function handleBrowse() {
|
||
const picked = await system.pickFolder();
|
||
if (picked !== null) setRoot(picked);
|
||
}
|
||
|
||
return (
|
||
<div className="flex flex-1 flex-col overflow-hidden">
|
||
{/* ── Error alert ── */}
|
||
{vm.error && (
|
||
<p
|
||
role="alert"
|
||
className="mx-4 mt-2 shrink-0 rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger"
|
||
>
|
||
{vm.error}
|
||
</p>
|
||
)}
|
||
|
||
{/* ── Project tab bar ── */}
|
||
<div className="flex shrink-0 items-center gap-1 border-b border-border bg-surface px-2 py-1">
|
||
{vm.openTabs.length === 0 ? (
|
||
<p className="px-2 text-sm text-muted">No open tabs.</p>
|
||
) : (
|
||
<Tabs
|
||
items={vm.openTabs.map((t) => ({ id: t.id, label: t.name }))}
|
||
value={vm.activeTabId}
|
||
onSelect={(id) => vm.activateTab(id)}
|
||
onClose={(id) => void vm.closeTab(id)}
|
||
className="flex-1"
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{/* ── IDE body: sidebar + main ── */}
|
||
<div className="flex flex-1 overflow-hidden">
|
||
{/* ── Collapsed sidebar: a thin rail with an expand button ── */}
|
||
{sidebarCollapsed && (
|
||
<aside className="flex w-9 shrink-0 flex-col items-center border-r border-border bg-surface py-1">
|
||
<button
|
||
type="button"
|
||
aria-label="expand sidebar"
|
||
title="Expand sidebar"
|
||
onClick={() => setSidebarCollapsed(false)}
|
||
className="flex h-7 w-7 items-center justify-center rounded text-muted hover:bg-raised hover:text-content"
|
||
>
|
||
»
|
||
</button>
|
||
</aside>
|
||
)}
|
||
|
||
{/* ── Sidebar ── */}
|
||
<aside
|
||
className={cn(
|
||
"flex w-80 shrink-0 flex-col border-r border-border bg-surface",
|
||
sidebarCollapsed && "hidden",
|
||
)}
|
||
>
|
||
{/* Sidebar tab strip (no role="tablist" to avoid collision with project tabs).
|
||
The tabs wrap onto multiple rows when they exceed the sidebar width
|
||
so every label stays visible without scrolling; the collapse button
|
||
stays pinned to the top-right. */}
|
||
<div className="flex shrink-0 items-start border-b border-border">
|
||
<div className="flex min-w-0 flex-1 flex-wrap items-stretch">
|
||
{SIDEBAR_TABS.map((t) => (
|
||
<button
|
||
key={t.id}
|
||
type="button"
|
||
aria-selected={sidebarTab === t.id}
|
||
onClick={() => setSidebarTab(t.id)}
|
||
className={cn(
|
||
"shrink-0 whitespace-nowrap px-3 py-2 text-xs font-medium transition-colors",
|
||
sidebarTab === t.id
|
||
? "border-b-2 border-primary text-content"
|
||
: "text-muted hover:text-content",
|
||
)}
|
||
>
|
||
{t.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
aria-label="collapse sidebar"
|
||
title="Collapse sidebar"
|
||
onClick={() => setSidebarCollapsed(true)}
|
||
className="shrink-0 self-stretch border-l border-border px-2 text-muted hover:text-content"
|
||
>
|
||
«
|
||
</button>
|
||
</div>
|
||
|
||
{/* Sidebar panel body */}
|
||
<div className="flex-1 overflow-auto p-3">
|
||
{/* Projects panel */}
|
||
{sidebarTab === "projects" && (
|
||
<div className="flex flex-col gap-4">
|
||
{/* Create form */}
|
||
<form
|
||
onSubmit={submit}
|
||
className="flex flex-col gap-2"
|
||
>
|
||
<h3 className="text-xs font-semibold uppercase tracking-wide text-faint">
|
||
New project
|
||
</h3>
|
||
<Input
|
||
aria-label="project name"
|
||
placeholder="Project name"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
/>
|
||
<div className="flex gap-2">
|
||
<Input
|
||
aria-label="project root"
|
||
placeholder="/absolute/project/root"
|
||
value={root}
|
||
onChange={(e) => setRoot(e.target.value)}
|
||
className="flex-1"
|
||
/>
|
||
<Button
|
||
type="button"
|
||
aria-label="browse project folder"
|
||
onClick={() => void handleBrowse()}
|
||
disabled={vm.busy}
|
||
>
|
||
Browse…
|
||
</Button>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
type="submit"
|
||
variant="primary"
|
||
disabled={!canCreate}
|
||
className="flex-1"
|
||
>
|
||
Create project
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
onClick={() => void vm.refresh()}
|
||
disabled={vm.busy}
|
||
>
|
||
Refresh
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
|
||
{/* Known projects list */}
|
||
<Panel title="Known projects">
|
||
{vm.projects.length === 0 ? (
|
||
<p className="text-sm text-muted">No projects yet.</p>
|
||
) : (
|
||
<ul className="flex flex-col divide-y divide-border">
|
||
{vm.projects.map((p) => (
|
||
<li
|
||
key={p.id}
|
||
className="flex items-center justify-between gap-2 py-2 first:pt-0 last:pb-0"
|
||
>
|
||
<span className="flex min-w-0 flex-col gap-0.5">
|
||
<span className="font-medium text-content">{p.name}</span>
|
||
<code className="truncate text-xs text-muted">{p.root}</code>
|
||
</span>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => void vm.openProject(p.id)}
|
||
>
|
||
Open
|
||
</Button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</Panel>
|
||
</div>
|
||
)}
|
||
|
||
{/* Project context panel */}
|
||
{sidebarTab === "context" && active && (
|
||
<ProjectContextPanel projectId={active.id} />
|
||
)}
|
||
{sidebarTab === "context" && !active && (
|
||
<p className="text-sm text-muted">Open a project to edit context.</p>
|
||
)}
|
||
|
||
{/* Agents panel — only rendered when active project exists */}
|
||
{sidebarTab === "agents" && active && (
|
||
<AgentsPanel projectId={active.id} projectRoot={active.root} />
|
||
)}
|
||
{sidebarTab === "agents" && !active && (
|
||
<p className="text-sm text-muted">Open a project to manage agents.</p>
|
||
)}
|
||
|
||
{/* Templates panel */}
|
||
{sidebarTab === "templates" && active && (
|
||
<TemplatesPanel projectId={active.id} />
|
||
)}
|
||
{sidebarTab === "templates" && !active && (
|
||
<p className="text-sm text-muted">Open a project to manage templates.</p>
|
||
)}
|
||
|
||
{/* Skills panel */}
|
||
{sidebarTab === "skills" && active && (
|
||
<SkillsPanel projectId={active.id} />
|
||
)}
|
||
{sidebarTab === "skills" && !active && (
|
||
<p className="text-sm text-muted">Open a project to manage skills.</p>
|
||
)}
|
||
|
||
{/* Permissions panel */}
|
||
{sidebarTab === "permissions" && active && (
|
||
<PermissionsPanel projectId={active.id} />
|
||
)}
|
||
{sidebarTab === "permissions" && !active && (
|
||
<p className="text-sm text-muted">Open a project to manage permissions.</p>
|
||
)}
|
||
|
||
{/* Memory panel + embedder settings */}
|
||
{sidebarTab === "memory" && active && (
|
||
<div className="flex flex-col gap-4">
|
||
<MemoryPanel projectId={active.id} />
|
||
<EmbedderSettings />
|
||
</div>
|
||
)}
|
||
{sidebarTab === "memory" && !active && (
|
||
<p className="text-sm text-muted">Open a project to manage memory.</p>
|
||
)}
|
||
|
||
{/* Git panel */}
|
||
{sidebarTab === "git" && active && (
|
||
<GitPanel projectId={active.id} />
|
||
)}
|
||
{sidebarTab === "git" && !active && (
|
||
<p className="text-sm text-muted">Open a project to manage git.</p>
|
||
)}
|
||
</div>
|
||
</aside>
|
||
|
||
{/* ── Main: terminal grid or git graph (fills remaining height) ── */}
|
||
<main className="flex flex-1 flex-col overflow-hidden">
|
||
{active ? (
|
||
<>
|
||
<LayoutTabs
|
||
projectId={active.id}
|
||
onActiveLayoutChange={setActiveLayout}
|
||
/>
|
||
{activeLayoutKind === "gitGraph" ? (
|
||
<GitGraphView
|
||
key={`${active.id}-${activeLayout?.id ?? "default"}-graph`}
|
||
projectId={active.id}
|
||
/>
|
||
) : (
|
||
<LayoutGrid
|
||
key={`${active.id}-${activeLayout?.id ?? "default"}`}
|
||
projectId={active.id}
|
||
cwd={active.root}
|
||
layoutId={activeLayout?.id}
|
||
/>
|
||
)}
|
||
</>
|
||
) : (
|
||
<div className="flex flex-1 items-center justify-center text-muted">
|
||
<p className="text-sm">Select or create a project to get started.</p>
|
||
</div>
|
||
)}
|
||
</main>
|
||
</div>
|
||
|
||
{/* ── Reopen resume panel (§15.2) ──
|
||
Mounted per active project (keyed by id) so it re-pulls the resumable
|
||
inventory on every open/switch; it renders nothing when empty. */}
|
||
{active && (
|
||
<ResumeProjectPanel
|
||
key={`resume-${active.id}`}
|
||
projectId={active.id}
|
||
cwd={active.root}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|