@echothink-ui/project 0.1.0

package/src/components/ProjectCard.tsx

@@ -0,0 +1,117 @@
+import * as React from "react";
+import {
+  ActionGroup,
+  Badge,
+  Button,
+  StatusDot,
+  statusLabel,
+  type EthAction
+} from "@echothink-ui/core";
+import type { ProjectBaseProps, ProjectSummary } from "../types";
+import {
+  classNames,
+  formatNumber,
+  healthLabel,
+  healthToStatus,
+  projectHtmlProps,
+  statusToSeverity
+} from "../utils";
+
+export interface ProjectCardProps extends ProjectBaseProps {
+  project?: ProjectSummary;
+  onSelect?: (projectId: string) => void;
+  actions?: EthAction[];
+}
+
+export function ProjectCard({
+  project,
+  onSelect,
+  actions,
+  className,
+  ...props
+}: ProjectCardProps) {
+  const resolvedProject: ProjectSummary = project ?? {
+    id: "project",
+    name: "Project",
+    status: "not-started",
+    description: "Project summary"
+  };
+  const titleId = `${resolvedProject.id}-title`;
+  const descriptionId = resolvedProject.description
+    ? `${resolvedProject.id}-description`
+    : undefined;
+
+  return (
+    <article
+      {...projectHtmlProps(props)}
+      className={classNames(
+        "eth-project-card",
+        `eth-project-card--${resolvedProject.status}`,
+        className
+      )}
+      data-eth-component="ProjectCard"
+      data-status={resolvedProject.status}
+      role="region"
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      tabIndex={-1}
+    >
+      <header className="eth-project-card__header">
+        <div className="eth-project-card__heading">
+          <h3 id={titleId}>{resolvedProject.name}</h3>
+          {resolvedProject.description ? (
+            <p id={descriptionId}>{resolvedProject.description}</p>
+          ) : null}
+        </div>
+        <div className="eth-project-card__status">
+          <Badge severity={statusToSeverity(resolvedProject.status)}>
+            {statusLabel(resolvedProject.status)}
+          </Badge>
+        </div>
+      </header>
+
+      <dl className="eth-project-card__metadata">
+        <div>
+          <dt>Owner</dt>
+          <dd>{resolvedProject.ownerLabel ?? "Unassigned"}</dd>
+        </div>
+        <div>
+          <dt>Updated</dt>
+          <dd>{resolvedProject.updatedAt ?? "Not updated"}</dd>
+        </div>
+        <div>
+          <dt>App domains</dt>
+          <dd>{formatNumber(resolvedProject.appDomainsCount)}</dd>
+        </div>
+        <div>
+          <dt>Open tasks</dt>
+          <dd>{formatNumber(resolvedProject.openTasksCount)}</dd>
+        </div>
+        <div>
+          <dt>Health</dt>
+          <dd>
+            <StatusDot
+              status={healthToStatus(resolvedProject.healthStatus)}
+              label={healthLabel(resolvedProject.healthStatus)}
+            />
+          </dd>
+        </div>
+      </dl>
+
+      {onSelect || actions?.length ? (
+        <footer className="eth-project-card__actions">
+          {onSelect ? (
+            <Button
+              intent="secondary"
+              density="compact"
+              onClick={() => onSelect(resolvedProject.id)}
+            >
+              Open project
+            </Button>
+          ) : null}
+          <ActionGroup actions={actions} />
+        </footer>
+      ) : null}
+    </article>
+  );
+}

package/src/components/ProjectCreateForm.test.tsx

@@ -0,0 +1,45 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ProjectCreateForm } from "./ProjectCreateForm";
+
+describe("ProjectCreateForm", () => {
+  it("renders a named create form with supporting description", () => {
+    render(<ProjectCreateForm />);
+
+    const form = screen.getByRole("form", { name: "Create project" });
+    const description = screen.getByText(
+      "Start a project workspace with an owner, template, and operating context."
+    );
+
+    expect(form.getAttribute("aria-describedby")).toBe(description.id);
+  });
+
+  it("validates required name and submits trimmed project values", () => {
+    const onSubmit = vi.fn();
+    render(
+      <ProjectCreateForm
+        defaults={{ description: "Initial scope", ownerLabel: "Jane Doe" }}
+        onSubmit={onSubmit}
+      />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Create project" }));
+    expect(screen.getAllByText("Project name is required.")).toHaveLength(2);
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    fireEvent.change(screen.getByLabelText("Name"), {
+      target: { value: "  Q3 launch workspace  " }
+    });
+    fireEvent.change(screen.getByLabelText("Template"), {
+      target: { value: "software-delivery" }
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Create project" }));
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      name: "Q3 launch workspace",
+      description: "Initial scope",
+      ownerLabel: "Jane Doe",
+      template: "software-delivery"
+    });
+  });
+});

package/src/components/ProjectCreateForm.tsx

@@ -0,0 +1,176 @@
+import * as React from "react";
+import {
+  Button,
+  FormField,
+  FormSection,
+  FormValidationMessage,
+  Select,
+  TextInput,
+  Textarea
+} from "@echothink-ui/core";
+import type { ProjectBaseProps, ProjectCreateValues } from "../types";
+import { classNames, projectHtmlProps } from "../utils";
+
+export interface ProjectCreateFormProps extends ProjectBaseProps {
+  defaults?: Partial<ProjectCreateValues>;
+  onSubmit?: (values: ProjectCreateValues) => void;
+  onCancel?: () => void;
+}
+
+const templateOptions = [
+  { value: "blank", label: "Blank project" },
+  { value: "software-delivery", label: "Software delivery" },
+  { value: "research", label: "Research workspace" },
+  { value: "operations", label: "Operations runbook" }
+];
+
+export function ProjectCreateForm({
+  defaults,
+  onSubmit,
+  onCancel,
+  title = "Create project",
+  description = "Start a project workspace with an owner, template, and operating context.",
+  className,
+  ...props
+}: ProjectCreateFormProps) {
+  const [values, setValues] = React.useState<ProjectCreateValues>({
+    name: defaults?.name ?? "",
+    description: defaults?.description ?? "",
+    ownerLabel: defaults?.ownerLabel ?? "",
+    template: defaults?.template ?? "blank"
+  });
+  const [nameError, setNameError] = React.useState<string>();
+  const formId = React.useId().replace(/:/g, "");
+  const titleId = `eth-project-create-form-${formId}-title`;
+  const descriptionId = `eth-project-create-form-${formId}-description`;
+  const htmlProps = projectHtmlProps(props);
+  const describedBy =
+    [htmlProps["aria-describedby"], description ? descriptionId : undefined]
+      .filter(Boolean)
+      .join(" ") || undefined;
+
+  const update = (field: keyof ProjectCreateValues, value: string) => {
+    setValues((current) => ({ ...current, [field]: value }));
+    if (field === "name" && value.trim()) setNameError(undefined);
+  };
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!values.name.trim()) {
+      setNameError("Project name is required.");
+      return;
+    }
+    onSubmit?.({ ...values, name: values.name.trim() });
+  };
+
+  return (
+    <form
+      {...htmlProps}
+      className={classNames("eth-project-create-form", className)}
+      data-eth-component="ProjectCreateForm"
+      aria-labelledby={htmlProps["aria-labelledby"] ?? (title ? titleId : undefined)}
+      aria-describedby={describedBy}
+      onSubmit={submit}
+      noValidate
+    >
+      {title || description ? (
+        <header className="eth-project-create-form__header">
+          {title ? (
+            <h2 id={titleId} className="eth-project-create-form__title">
+              {title}
+            </h2>
+          ) : null}
+          {description ? (
+            <p id={descriptionId} className="eth-project-create-form__description">
+              {description}
+            </p>
+          ) : null}
+        </header>
+      ) : null}
+
+      {nameError ? (
+        <FormValidationMessage className="eth-project-create-form__validation">
+          {nameError}
+        </FormValidationMessage>
+      ) : null}
+
+      <FormSection
+        className="eth-project-create-form__section"
+        title="Project details"
+        description="Define the visible identity and initial scope for the workspace."
+      >
+        <div className="eth-project-create-form__grid">
+          <FormField
+            id="project-name"
+            label="Name"
+            helperText="Shown in project lists, tabs, and approval trails."
+            required
+            error={nameError}
+            className="eth-project-create-form__field"
+          >
+            <TextInput
+              value={values.name}
+              onChange={(event) => update("name", event.currentTarget.value)}
+              autoFocus
+            />
+          </FormField>
+          <FormField
+            id="project-owner"
+            label="Owner"
+            helperText="Person or group accountable for project changes."
+            className="eth-project-create-form__field"
+          >
+            <TextInput
+              value={values.ownerLabel}
+              onChange={(event) => update("ownerLabel", event.currentTarget.value)}
+            />
+          </FormField>
+          <FormField
+            id="project-description"
+            label="Description"
+            helperText="Summarize the purpose, key outputs, or operating window."
+            className="eth-project-create-form__field eth-project-create-form__field--wide"
+          >
+            <Textarea
+              value={values.description}
+              onChange={(event) => update("description", event.currentTarget.value)}
+              rows={4}
+            />
+          </FormField>
+        </div>
+      </FormSection>
+
+      <FormSection
+        className="eth-project-create-form__section"
+        title="Setup"
+        description="Select the starting structure for tasks, resources, and app-domain links."
+      >
+        <div className="eth-project-create-form__grid eth-project-create-form__grid--setup">
+          <FormField
+            id="project-template"
+            label="Template"
+            helperText="Templates prefill common sections without locking future changes."
+            className="eth-project-create-form__field"
+          >
+            <Select
+              options={templateOptions}
+              value={values.template}
+              onChange={(event) => update("template", event.currentTarget.value)}
+            />
+          </FormField>
+        </div>
+      </FormSection>
+
+      <footer className="eth-project-create-form__actions">
+        {onCancel ? (
+          <Button intent="secondary" onClick={onCancel}>
+            Cancel
+          </Button>
+        ) : null}
+        <Button type="submit" intent="primary">
+          Create project
+        </Button>
+      </footer>
+    </form>
+  );
+}

package/src/components/ProjectDashboardTemplate.tsx

@@ -0,0 +1,107 @@
+import * as React from "react";
+import { StatusDot, type EthAction } from "@echothink-ui/core";
+import { KPIBlock } from "@echothink-ui/charts";
+import { PageHeader } from "@echothink-ui/layouts";
+import type {
+  ProjectActivityEvent,
+  ProjectAppDomainInstance,
+  ProjectBaseProps,
+  ProjectResource,
+  ProjectSummary
+} from "../types";
+import { projectHtmlProps } from "../utils";
+import { ProjectActivityTimeline } from "./ProjectActivityTimeline";
+import { ProjectAppDomainPanel } from "./ProjectAppDomainPanel";
+import { ProjectResourcePanel } from "./ProjectResourcePanel";
+import { ProjectStatusSummary } from "./ProjectStatusSummary";
+
+export interface ProjectDashboardTemplateProps extends ProjectBaseProps {
+  project?: ProjectSummary;
+  projects?: ProjectSummary[];
+  events?: ProjectActivityEvent[];
+  resources?: ProjectResource[];
+  instances?: ProjectAppDomainInstance[];
+  actions?: EthAction[];
+}
+
+const demoProject: ProjectSummary = {
+  id: "project-demo",
+  name: "Project dashboard",
+  status: "in-progress",
+  description: "Project overview for resources, tasks, activity, and app domains.",
+  ownerLabel: "Operations",
+  updatedAt: "Today",
+  appDomainsCount: 2,
+  openTasksCount: 7,
+  healthStatus: "healthy"
+};
+
+const demoEvents: ProjectActivityEvent[] = [
+  {
+    id: "event-1",
+    timestamp: "2026-05-27 09:20",
+    actor: "EchoThink",
+    kind: "resource",
+    summary: "Resource inventory refreshed"
+  },
+  {
+    id: "event-2",
+    timestamp: "2026-05-27 10:05",
+    actor: "Project lead",
+    kind: "app-domain",
+    summary: "Analytics domain configured"
+  }
+];
+
+const demoResources: ProjectResource[] = [
+  { id: "res-1", label: "Launch brief", kind: "document", status: "synced", updatedAt: "Today" },
+  { id: "res-2", label: "Task backlog", kind: "table", status: "in-progress", updatedAt: "Today" }
+];
+
+const demoInstances: ProjectAppDomainInstance[] = [
+  { id: "inst-1", appDomainLabel: "Analytics", status: "running", health: "healthy" },
+  { id: "inst-2", appDomainLabel: "Document review", status: "active", health: "warning" }
+];
+
+export function ProjectDashboardTemplate({
+  project = demoProject,
+  projects,
+  events = demoEvents,
+  resources = demoResources,
+  instances = demoInstances,
+  className,
+  actions,
+  ...props
+}: ProjectDashboardTemplateProps) {
+  const projectSet = projects ?? [project];
+
+  return (
+    <main
+      {...projectHtmlProps(props)}
+      className={`eth-project-dashboard-template ${className ?? ""}`}
+      data-eth-component="ProjectDashboardTemplate"
+    >
+      <PageHeader
+        title={project.name}
+        subtitle={project.description}
+        status={project.status}
+        actions={actions}
+      />
+      <div className="eth-project-dashboard-template__kpis" role="region" aria-label="Project KPIs">
+        <KPIBlock title="Open tasks" value={project.openTasksCount ?? 0} />
+        <KPIBlock title="App domains" value={project.appDomainsCount ?? 0} />
+        <KPIBlock
+          title="Health"
+          value={project.healthStatus ?? "healthy"}
+          status={<StatusDot status="synced" label="Operational" />}
+        />
+      </div>
+      <ProjectStatusSummary projects={projectSet} />
+      <div className="eth-project-dashboard-template__grid">
+        <ProjectActivityTimeline events={events} />
+        <ProjectResourcePanel resources={resources} />
+        <ProjectAppDomainPanel instances={instances} />
+      </div>
+    </main>
+  );
+}

package/src/components/ProjectManagementPage.tsx

@@ -0,0 +1,112 @@
+import * as React from "react";
+import { Button, EmptyState, type EthAction } from "@echothink-ui/core";
+import { PageHeader } from "@echothink-ui/layouts";
+import type { ProjectBaseProps, ProjectSummary } from "../types";
+import { projectHtmlProps } from "../utils";
+import { ProjectStatusSummary } from "./ProjectStatusSummary";
+import { ProjectTable } from "./ProjectTable";
+
+export interface ProjectManagementPageProps extends ProjectBaseProps {
+  projects?: ProjectSummary[];
+  onCreate?: () => void;
+  onSelect?: (projectId: string) => void;
+  onFilterSelect?: (filterId: string) => void;
+  filters?: Array<{ id: string; label: React.ReactNode; active?: boolean }>;
+  activeProjectId?: string;
+  actions?: EthAction[];
+}
+
+export function ProjectManagementPage({
+  projects = [],
+  onCreate,
+  onSelect,
+  onFilterSelect,
+  filters = [],
+  activeProjectId,
+  title = "Projects",
+  subtitle = "Manage project workspaces, resources, and installed app domains.",
+  className,
+  actions,
+  ...props
+}: ProjectManagementPageProps) {
+  const headerActions = React.useMemo<EthAction[]>(() => {
+    const providedActions = actions ?? [];
+    const hasCreateAction = providedActions.some((action) => {
+      if (action.id === "new-project") return true;
+      return (
+        typeof action.label === "string" &&
+        action.label.trim().toLowerCase() === "new project"
+      );
+    });
+
+    if (!onCreate || hasCreateAction) return providedActions;
+
+    return [
+      ...providedActions,
+      {
+        id: "new-project",
+        label: "New project",
+        intent: "primary",
+        onSelect: onCreate
+      }
+    ];
+  }, [actions, onCreate]);
+
+  return (
+    <main
+      {...projectHtmlProps(props)}
+      className={`eth-project-management-page ${className ?? ""}`}
+      data-eth-component="ProjectManagementPage"
+    >
+      <PageHeader title={title} subtitle={subtitle} actions={headerActions} />
+
+      {filters.length ? (
+        <div
+          className="eth-project-management-page__filters"
+          role="group"
+          aria-label="Project filters"
+        >
+          {filters.map((filter) => (
+            <button
+              key={filter.id}
+              type="button"
+              className={`eth-project-management-page__filter ${
+                filter.active ? "eth-project-management-page__filter--active" : ""
+              }`}
+              aria-pressed={Boolean(filter.active)}
+              aria-disabled={!onFilterSelect ? true : undefined}
+              tabIndex={!onFilterSelect ? -1 : undefined}
+              onClick={onFilterSelect ? () => onFilterSelect(filter.id) : undefined}
+            >
+              {filter.label}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      {projects.length ? (
+        <>
+          <ProjectStatusSummary projects={projects} />
+          <ProjectTable
+            projects={projects}
+            onRowSelect={onSelect}
+            selectedProjectId={activeProjectId}
+            aria-label={activeProjectId ? `Projects, active ${activeProjectId}` : "Projects"}
+          />
+        </>
+      ) : (
+        <EmptyState
+          title="No projects yet"
+          description="Create a project to connect resources, members, model settings, and app domains."
+          action={
+            onCreate ? (
+              <Button intent="primary" onClick={onCreate}>
+                New project
+              </Button>
+            ) : undefined
+          }
+        />
+      )}
+    </main>
+  );
+}