@echothink-ui/project 0.1.0

package/src/index.test.tsx

@@ -0,0 +1,337 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  ProjectAppDomainPanel,
+  ProjectComponentNames,
+  ProjectMembersPanel,
+  ProjectModelConfigPanel,
+  ProjectPermissionPanel,
+  ProjectResourcePanel,
+  ProjectStatusSummary,
+  ProjectTab,
+  ProjectTabGroup,
+  ProjectTable
+} from "./index";
+
+const instances = [
+  {
+    id: "mailbox",
+    appDomainLabel: "Mailbox",
+    status: "running" as const,
+    health: "healthy" as const
+  },
+  {
+    id: "documents",
+    appDomainLabel: "Documents",
+    status: "in-progress" as const,
+    health: "warning" as const
+  }
+];
+
+describe("@echothink-ui/project ProjectTable", () => {
+  it("renders a named table with stable project name and description blocks", () => {
+    render(
+      <ProjectTable
+        projects={[
+          {
+            id: "p1",
+            name: "Marketing Campaign",
+            status: "in-progress",
+            description: "Q3 product launch and lifecycle messaging.",
+            ownerLabel: "JD",
+            updatedAt: "May 27",
+            appDomainsCount: 4,
+            openTasksCount: 12
+          }
+        ]}
+      />
+    );
+
+    const table = screen.getByRole("table", { name: "Project list" });
+    const nameGroup = screen.getByText("Marketing Campaign").closest(".eth-project-table__name");
+
+    expect(table.className).toContain("eth-project-table__table");
+    expect(nameGroup?.querySelector(".eth-project-table__title")?.textContent).toBe(
+      "Marketing Campaign"
+    );
+    expect(nameGroup?.querySelector(".eth-project-table__description")?.textContent).toBe(
+      "Q3 product launch and lifecycle messaging."
+    );
+    expect(screen.getByRole("columnheader", { name: "App domains" })).toBeTruthy();
+  });
+});
+
+describe("@echothink-ui/project ProjectAppDomainPanel", () => {
+  it("omits the actions column when no action handlers are available", () => {
+    render(<ProjectAppDomainPanel instances={instances} />);
+
+    expect(screen.queryByText("Actions")).toBeNull();
+    expect(screen.queryByRole("button", { name: "Open" })).toBeNull();
+  });
+
+  it("shows configured row actions when handlers are provided", () => {
+    render(
+      <ProjectAppDomainPanel
+        instances={instances}
+        onOpen={() => undefined}
+        onConfigure={() => undefined}
+        onRemove={() => undefined}
+      />
+    );
+
+    expect(screen.getByText("Actions")).toBeTruthy();
+    expect(screen.getAllByRole("button", { name: "Open" })).toHaveLength(2);
+    expect(screen.getAllByRole("button", { name: "Configure" })).toHaveLength(2);
+    expect(screen.getAllByRole("button", { name: "Remove" })).toHaveLength(2);
+  });
+});
+
+describe("@echothink-ui/project ProjectModelConfigPanel", () => {
+  const providers = [
+    {
+      id: "anthropic",
+      label: "Anthropic",
+      models: [{ id: "claude-opus-4-7", label: "Claude Opus 4.7" }]
+    },
+    {
+      id: "openai",
+      label: "OpenAI",
+      models: [{ id: "gpt-4o", label: "GPT-4o" }]
+    }
+  ];
+
+  it("renders selected model summary and generation parameter context", () => {
+    render(
+      <ProjectModelConfigPanel
+        providers={providers}
+        selectedProvider="anthropic"
+        model="claude-opus-4-7"
+        params={{ temperature: 0.4, topP: 0.95, maxTokens: 4096 }}
+      />
+    );
+
+    expect(screen.getByRole("region", { name: "Project model configuration" })).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "Project model configuration" })).toBeTruthy();
+    expect(screen.getAllByText("Anthropic").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Claude Opus 4.7").length).toBeGreaterThan(0);
+    expect(screen.getByText("Controls response randomness.")).toBeTruthy();
+    expect(screen.getByText("Caps the response length for project agent runs.")).toBeTruthy();
+  });
+
+  it("emits the first available model when the provider changes", () => {
+    const handleChange = vi.fn();
+
+    render(
+      <ProjectModelConfigPanel
+        providers={providers}
+        selectedProvider="anthropic"
+        model="claude-opus-4-7"
+        params={{ temperature: 0.4, topP: 0.95, maxTokens: 4096 }}
+        onChange={handleChange}
+      />
+    );
+
+    fireEvent.change(screen.getByLabelText("Provider"), { target: { value: "openai" } });
+
+    expect(handleChange).toHaveBeenCalledWith({
+      provider: "openai",
+      model: "gpt-4o",
+      params: { temperature: 0.4, topP: 0.95, maxTokens: 4096 }
+    });
+  });
+});
+
+describe("@echothink-ui/project ProjectMembersPanel", () => {
+  it("renders members as active by default and keeps roles read-only without a change handler", () => {
+    render(<ProjectMembersPanel members={[{ id: "m1", label: "Jane Doe", role: "owner" }]} />);
+
+    expect(screen.getByText("Active")).toBeTruthy();
+    expect(screen.queryByText("-")).toBeNull();
+    expect(screen.queryByRole("combobox", { name: "Role for Jane Doe" })).toBeNull();
+    expect(screen.getByText("Owner")).toBeTruthy();
+  });
+
+  it("shows editable role controls and row actions when handlers are provided", () => {
+    render(
+      <ProjectMembersPanel
+        members={[{ id: "m1", label: "Jane Doe", role: "owner", status: "active" }]}
+        onChangeRole={() => undefined}
+        onRemove={() => undefined}
+      />
+    );
+
+    expect(screen.getByRole("combobox", { name: "Role for Jane Doe" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Remove" })).toBeTruthy();
+  });
+});
+
+describe("@echothink-ui/project ProjectPermissionPanel", () => {
+  const subjects = [
+    { id: "jd", label: "Jane Doe" },
+    { id: "mk", label: "Mark K." }
+  ];
+  const resources = [
+    { id: "brief", label: "Brief.md" },
+    { id: "tasks", label: "Tasks" }
+  ];
+  const actions = [
+    { id: "read", label: "Read" },
+    { id: "write", label: "Write" }
+  ];
+  const assignments = {
+    "jd:brief:read": true,
+    "jd:brief:write": true,
+    "mk:brief:read": true
+  };
+
+  it("summarizes the matrix and announces editable permission controls", () => {
+    const handleChange = vi.fn();
+
+    render(
+      <ProjectPermissionPanel
+        subjects={subjects}
+        resources={resources}
+        actions={actions}
+        assignments={assignments}
+        onChange={handleChange}
+      />
+    );
+
+    expect(screen.getByRole("heading", { name: "Project permissions" })).toBeTruthy();
+    expect(
+      within(screen.getByLabelText("Project permission summary")).getByText("3")
+    ).toBeTruthy();
+    expect(
+      within(screen.getByLabelText("Project permission summary")).getByText("5")
+    ).toBeTruthy();
+
+    fireEvent.click(
+      screen.getByRole("checkbox", { name: "Write permission for Mark K. on Tasks" })
+    );
+
+    expect(handleChange).toHaveBeenCalledWith("mk:tasks:write", true);
+  });
+
+  it("uses read-only permission states when no change handler is provided", () => {
+    render(
+      <ProjectPermissionPanel
+        subjects={subjects.slice(0, 1)}
+        resources={resources.slice(0, 1)}
+        actions={actions}
+        assignments={assignments}
+      />
+    );
+
+    expect(screen.queryByRole("checkbox")).toBeNull();
+    expect(within(screen.getByRole("table")).getAllByText("Granted")).toHaveLength(2);
+  });
+});
+
+describe("@echothink-ui/project ProjectResourcePanel", () => {
+  const resources = [
+    {
+      id: "brief",
+      kind: "document",
+      label: "Brief.md",
+      status: "synced" as const,
+      updatedAt: "May 27"
+    },
+    {
+      id: "hero",
+      kind: "image",
+      label: "hero.png",
+      status: "in-progress" as const,
+      updatedAt: "May 26"
+    },
+    {
+      id: "dataset",
+      kind: "table",
+      label: "Audience segments",
+      status: "stale" as const,
+      updatedAt: "May 24"
+    }
+  ];
+
+  it("summarizes resource counts and attention states", () => {
+    render(<ProjectResourcePanel resources={resources} />);
+    const summary = screen.getByLabelText("Resource summary");
+
+    expect(screen.getByRole("region", { name: "Project resources" })).toBeTruthy();
+    expect(within(summary).getByText("Resources")).toBeTruthy();
+    expect(within(summary).getByText("Synced")).toBeTruthy();
+    expect(within(summary).getByText("Attention")).toBeTruthy();
+    expect(screen.queryByText("Actions")).toBeNull();
+  });
+
+  it("shows an open action only when selection is available", () => {
+    render(<ProjectResourcePanel resources={resources} onSelect={() => undefined} />);
+
+    expect(screen.getByText("Actions")).toBeTruthy();
+    expect(screen.getAllByRole("button", { name: "Open" })).toHaveLength(3);
+  });
+});
+
+describe("@echothink-ui/project ProjectStatusSummary", () => {
+  it("includes attention statuses in the distribution legend", () => {
+    render(
+      <ProjectStatusSummary
+        summary={{
+          byStatus: { running: 1, "approval-required": 1 },
+          healthyPercent: 50,
+          blockedCount: 1
+        }}
+      />
+    );
+
+    expect(screen.getByText("Approval Required 1")).toBeTruthy();
+  });
+});
+
+describe("@echothink-ui/project ProjectTab", () => {
+  it("exports a project-scoped browser tab with tab semantics and status", () => {
+    render(<ProjectTab id="marketing" label="Marketing Campaign" status="active" active />);
+
+    expect(ProjectComponentNames).toContain("ProjectTab");
+    const tab = screen.getByRole("tab", { name: /Marketing Campaign/ });
+    expect(tab.getAttribute("aria-selected")).toBe("true");
+    expect(screen.getByText("Active")).toBeTruthy();
+  });
+});
+
+describe("@echothink-ui/project ProjectTabGroup", () => {
+  it("renders project-scoped tabs with status, active state, and close affordances", () => {
+    const handleActivate = vi.fn();
+    const handleClose = vi.fn();
+
+    const { container } = render(
+      <ProjectTabGroup
+        projectId="marketing"
+        projectLabel="Marketing Campaign"
+        activeTabId="dashboard"
+        tabs={[
+          { id: "dashboard", label: "Dashboard", status: "active" },
+          { id: "tasks", label: "Tasks", status: "running", dirty: true },
+          { id: "brief", label: "Brief.md", status: "in-progress" }
+        ]}
+        onActivateTab={handleActivate}
+        onCloseTab={handleClose}
+      />
+    );
+
+    expect(container.querySelector('[data-eth-component="ProjectTabGroup"]')).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "Marketing Campaign" })).toBeTruthy();
+    expect(screen.getByRole("tablist", { name: "Marketing Campaign" })).toBeTruthy();
+
+    const activeTab = screen.getByRole("tab", { name: /Dashboard/ });
+    expect(activeTab.getAttribute("aria-selected")).toBe("true");
+    expect(screen.getByText("Active")).toBeTruthy();
+    expect(screen.getByText("Running")).toBeTruthy();
+    expect(screen.getByLabelText("Unsaved changes")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("tab", { name: /Tasks/ }));
+    expect(handleActivate).toHaveBeenCalledWith("tasks");
+
+    fireEvent.click(screen.getByRole("button", { name: "Close Brief.md" }));
+    expect(handleClose).toHaveBeenCalledWith("brief");
+  });
+});

package/src/index.tsx

@@ -0,0 +1,41 @@
+import "./styles.css";
+
+export * from "./types";
+export * from "./components/ProjectManagementPage";
+export * from "./components/ProjectCard";
+export * from "./components/ProjectTable";
+export * from "./components/ProjectTab";
+export * from "./components/ProjectStatusSummary";
+export * from "./components/ProjectCreateForm";
+export * from "./components/ProjectSummaryPanel";
+export * from "./components/ProjectSettingsPanel";
+export * from "./components/ProjectScopeSelector";
+export * from "./components/ProjectResourcePanel";
+export * from "./components/ProjectActivityTimeline";
+export * from "./components/ProjectTabGroup";
+export * from "./components/ProjectMembersPanel";
+export * from "./components/ProjectPermissionPanel";
+export * from "./components/ProjectAppDomainPanel";
+export * from "./components/ProjectModelConfigPanel";
+export * from "./components/ProjectDashboardTemplate";
+
+export const ProjectComponentNames = [
+  "ProjectManagementPage",
+  "ProjectCard",
+  "ProjectTable",
+  "ProjectTab",
+  "ProjectStatusSummary",
+  "ProjectCreateForm",
+  "ProjectSummaryPanel",
+  "ProjectSettingsPanel",
+  "ProjectScopeSelector",
+  "ProjectResourcePanel",
+  "ProjectActivityTimeline",
+  "ProjectTabGroup",
+  "ProjectMembersPanel",
+  "ProjectPermissionPanel",
+  "ProjectAppDomainPanel",
+  "ProjectModelConfigPanel",
+  "ProjectDashboardTemplate"
+] as const;
+export type ProjectComponentName = (typeof ProjectComponentNames)[number];