@echothink-ui/project 0.1.0

package/src/components/ProjectResourcePanel.tsx

@@ -0,0 +1,154 @@
+import * as React from "react";
+import {
+  Badge,
+  EmptyState,
+  StatusDot,
+  statusLabel,
+  type EthAction
+} from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { ProjectBaseProps, ProjectResource } from "../types";
+import { classNames, formatNumber, projectHtmlProps } from "../utils";
+
+const syncedStatuses = new Set(["completed", "succeeded", "synced", "active"]);
+const attentionStatuses = new Set([
+  "blocked",
+  "failed",
+  "stale",
+  "warning",
+  "pending-approval",
+  "approval-required"
+]);
+
+export interface ProjectResourcePanelProps extends ProjectBaseProps {
+  resources?: ProjectResource[];
+  onSelect?: (resourceId: string) => void;
+}
+
+export function ProjectResourcePanel({
+  resources = [],
+  onSelect,
+  className,
+  title = "Project resources",
+  ...props
+}: ProjectResourcePanelProps) {
+  const syncedCount = resources.filter(
+    (resource) => resource.status && syncedStatuses.has(resource.status)
+  ).length;
+  const attentionCount = resources.filter(
+    (resource) => resource.status && attentionStatuses.has(resource.status)
+  ).length;
+  const hasRowActions = Boolean(onSelect);
+
+  const columns = React.useMemo<DataColumn<ProjectResource>[]>(
+    () => [
+      {
+        key: "label",
+        header: "Resource",
+        width: "40%",
+        render: (resource) => (
+          <div className="eth-project-resource-panel__resource">
+            <span className="eth-project-resource-panel__resource-icon" aria-hidden="true">
+              {resourceKindInitial(resource.kind)}
+            </span>
+            <span className="eth-project-resource-panel__resource-copy">
+              <strong>{resource.label}</strong>
+              <span>{resource.id}</span>
+            </span>
+          </div>
+        )
+      },
+      {
+        key: "kind",
+        header: "Kind",
+        width: "14%",
+        render: (resource) => <Badge severity="neutral">{resourceKindLabel(resource.kind)}</Badge>
+      },
+      {
+        key: "status",
+        header: "Status",
+        width: "20%",
+        render: (resource) =>
+          resource.status ? (
+            <StatusDot status={resource.status} label={statusLabel(resource.status)} />
+          ) : (
+            <span className="eth-project-resource-panel__muted">Not tracked</span>
+          )
+      },
+      {
+        key: "updatedAt",
+        header: "Updated",
+        width: "16%",
+        render: (resource) => (
+          <span className="eth-project-resource-panel__updated">
+            {resource.updatedAt ?? "Not updated"}
+          </span>
+        )
+      }
+    ],
+    []
+  );
+
+  const rowActions = React.useCallback(
+    (resource: ProjectResource): EthAction[] =>
+      onSelect ? [{ id: "open", label: "Open", onSelect: () => onSelect(resource.id) }] : [],
+    [onSelect]
+  );
+
+  return (
+    <section
+      {...projectHtmlProps(props)}
+      className={classNames("eth-project-resource-panel", className)}
+      data-eth-component="ProjectResourcePanel"
+      role="region"
+      aria-label={typeof title === "string" ? title : "Project resources"}
+      tabIndex={-1}
+    >
+      {title ? (
+        <header className="eth-project-resource-panel__header">
+          <h3>{title}</h3>
+          <dl className="eth-project-resource-panel__summary" aria-label="Resource summary">
+            <div>
+              <dt>Resources</dt>
+              <dd>{formatNumber(resources.length)}</dd>
+            </div>
+            <div>
+              <dt>Synced</dt>
+              <dd>{formatNumber(syncedCount)}</dd>
+            </div>
+            <div>
+              <dt>Attention</dt>
+              <dd>{formatNumber(attentionCount)}</dd>
+            </div>
+          </dl>
+        </header>
+      ) : null}
+      <DataTable
+        rows={resources}
+        columns={columns}
+        rowKey="id"
+        density="compact"
+        className="eth-project-resource-panel__table"
+        rowActions={hasRowActions ? rowActions : undefined}
+        emptyState={
+          <EmptyState
+            title="No resources"
+            description="Linked files, documents, tables, and services appear here."
+          />
+        }
+      />
+    </section>
+  );
+}
+
+function resourceKindLabel(kind: string) {
+  return kind
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function resourceKindInitial(kind: string) {
+  return resourceKindLabel(kind).charAt(0) || "R";
+}

package/src/components/ProjectScopeSelector.test.tsx

@@ -0,0 +1,50 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ProjectScopeSelector } from "./ProjectScopeSelector";
+
+const scopes = [
+  {
+    id: "campaign",
+    label: "Campaign scope",
+    kind: "project" as const,
+    status: "active" as const
+  },
+  {
+    id: "mailbox",
+    label: "Mailbox",
+    kind: "app-domain" as const,
+    status: "running" as const
+  },
+  { id: "brief", label: "Brief.md", kind: "resource" as const }
+];
+
+describe("@echothink-ui/project ProjectScopeSelector", () => {
+  it("renders scopes as a single-select radio group with status metadata", () => {
+    const onSelect = vi.fn();
+
+    render(<ProjectScopeSelector scopes={scopes} activeScopeId="campaign" onSelect={onSelect} />);
+
+    expect(screen.getByRole("radiogroup", { name: "Target scope" })).toBeTruthy();
+    expect(
+      (screen.getByRole("radio", { name: /Campaign scope/ }) as HTMLInputElement).checked
+    ).toBe(true);
+    expect((screen.getByRole("radio", { name: /Mailbox/ }) as HTMLInputElement).checked).toBe(
+      false
+    );
+    expect(screen.getByText("Project")).toBeTruthy();
+    expect(screen.getByText("App domain")).toBeTruthy();
+    expect(screen.getByText("Active")).toBeTruthy();
+    expect(screen.getByText("Running")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("radio", { name: /Mailbox/ }));
+
+    expect(onSelect).toHaveBeenCalledWith("mailbox");
+  });
+
+  it("shows an empty state when no scopes are available", () => {
+    render(<ProjectScopeSelector scopes={[]} />);
+
+    expect(screen.getByText("No scopes")).toBeTruthy();
+    expect(screen.getByText("Project, app-domain, and resource targets appear here.")).toBeTruthy();
+  });
+});

package/src/components/ProjectScopeSelector.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { EmptyState, StatusDot, statusLabel } from "@echothink-ui/core";
+import type { ProjectBaseProps, ProjectScope } from "../types";
+import { classNames, projectHtmlProps } from "../utils";
+
+export interface ProjectScopeSelectorProps extends ProjectBaseProps {
+  scopes?: ProjectScope[];
+  activeScopeId?: string;
+  onSelect?: (scopeId: string) => void;
+}
+
+const kindLabels: Record<ProjectScope["kind"], string> = {
+  project: "Project",
+  "app-domain": "App domain",
+  resource: "Resource"
+};
+
+export function ProjectScopeSelector({
+  scopes = [],
+  activeScopeId,
+  onSelect,
+  className,
+  ...props
+}: ProjectScopeSelectorProps) {
+  const groupName = React.useId();
+
+  return (
+    <section
+      {...projectHtmlProps(props)}
+      className={classNames("eth-project-scope-selector", className)}
+      data-eth-component="ProjectScopeSelector"
+      role="region"
+      aria-label="Project scopes"
+      tabIndex={-1}
+    >
+      {scopes.length ? (
+        <div
+          className="eth-project-scope-selector__group"
+          role="radiogroup"
+          aria-label="Target scope"
+        >
+          {scopes.map((scope, index) => {
+            const active = activeScopeId === scope.id;
+            const inputId = `${groupName}-${index}`;
+
+            return (
+              <label
+                key={scope.id}
+                className={classNames(
+                  "eth-project-scope-selector__item",
+                  active && "eth-project-scope-selector__item--active",
+                  !onSelect && "eth-project-scope-selector__item--readonly"
+                )}
+                htmlFor={inputId}
+              >
+                <input
+                  id={inputId}
+                  className="eth-project-scope-selector__control"
+                  type="radio"
+                  name={groupName}
+                  value={scope.id}
+                  checked={active}
+                  readOnly={!onSelect}
+                  onChange={() => onSelect?.(scope.id)}
+                />
+                <span className="eth-project-scope-selector__content">
+                  <span className="eth-project-scope-selector__title-row">
+                    <span className="eth-project-scope-selector__label">{scope.label}</span>
+                    {scope.status ? (
+                      <span className="eth-project-scope-selector__status">
+                        <StatusDot status={scope.status} label={statusLabel(scope.status)} />
+                      </span>
+                    ) : null}
+                  </span>
+                  <span className="eth-project-scope-selector__kind">
+                    {kindLabels[scope.kind]}
+                  </span>
+                </span>
+              </label>
+            );
+          })}
+        </div>
+      ) : (
+        <EmptyState
+          className="eth-project-scope-selector__empty"
+          title="No scopes"
+          description="Project, app-domain, and resource targets appear here."
+        />
+      )}
+    </section>
+  );
+}

package/src/components/ProjectSettingsPanel.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ProjectSettingsPanel } from "./ProjectSettingsPanel";
+
+describe("ProjectSettingsPanel", () => {
+  it("renders project members as editable collaborators inside the settings surface", () => {
+    render(
+      <ProjectSettingsPanel
+        settings={{
+          name: "Marketing Campaign",
+          members: [{ id: "alex", label: "Alex Chen", role: "owner" }],
+          defaultRole: "editor"
+        }}
+      />
+    );
+
+    expect(screen.getByRole("heading", { name: "Project settings" })).toBeTruthy();
+    expect(screen.getByText("Alex Chen")).toBeTruthy();
+    const roleSelect = screen.getByRole("combobox", {
+      name: "Role for Alex Chen"
+    }) as HTMLSelectElement;
+
+    expect(roleSelect.value).toBe("owner");
+  });
+});

package/src/components/ProjectSettingsPanel.tsx

@@ -0,0 +1,244 @@
+import * as React from "react";
+import {
+  FormField,
+  FormSection,
+  Select,
+  TextInput,
+  Textarea
+} from "@echothink-ui/core";
+import type { ProjectBaseProps, ProjectSettings } from "../types";
+import { classNames, projectHtmlProps } from "../utils";
+
+export interface ProjectSettingsPanelProps extends ProjectBaseProps {
+  settings?: ProjectSettings;
+  onChange?: (settings: ProjectSettings) => void;
+}
+
+const permissionOptions = [
+  { value: "private", label: "Private" },
+  { value: "team", label: "Team" },
+  { value: "organization", label: "Organization" }
+];
+
+const roleOptions = [
+  { value: "viewer", label: "Viewer" },
+  { value: "editor", label: "Editor" },
+  { value: "owner", label: "Owner" }
+];
+
+const providerOptions = [
+  { value: "openai", label: "OpenAI" },
+  { value: "azure-openai", label: "Azure OpenAI" },
+  { value: "custom", label: "Custom provider" }
+];
+
+const modelOptions = [
+  { value: "gpt-4o", label: "GPT-4o" },
+  { value: "gpt-5.4", label: "GPT-5.4" },
+  { value: "gpt-5.4-mini", label: "GPT-5.4 mini" },
+  { value: "custom", label: "Custom model" }
+];
+
+function optionLabel(options: Array<{ value: string; label: string }>, value: string) {
+  return options.find((option) => option.value === value)?.label ?? value;
+}
+
+function nodeText(node: React.ReactNode) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  return "member";
+}
+
+function memberInitials(label: React.ReactNode) {
+  const text = nodeText(label);
+  const words = text.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0 || text === "member") return "M";
+  return words
+    .slice(0, 2)
+    .map((word) => word.charAt(0).toUpperCase())
+    .join("");
+}
+
+function countLabel(count: number, singular: string, plural = `${singular}s`) {
+  return `${count} ${count === 1 ? singular : plural}`;
+}
+
+export function ProjectSettingsPanel({
+  settings = {},
+  onChange,
+  className,
+  ...props
+}: ProjectSettingsPanelProps) {
+  const titleId = React.useId();
+  const members = settings.members ?? [];
+  const permissionMode = settings.permissionMode ?? "private";
+  const defaultRole = settings.defaultRole ?? "viewer";
+  const modelProvider = settings.modelProvider ?? "openai";
+  const model = settings.model ?? "gpt-5.4";
+  const update = (patch: Partial<ProjectSettings>) => {
+    onChange?.({ ...settings, ...patch });
+  };
+  const updateMemberRole = (memberId: string, role: string) => {
+    update({
+      members: members.map((member) => (member.id === memberId ? { ...member, role } : member))
+    });
+  };
+
+  return (
+    <section
+      {...projectHtmlProps(props)}
+      className={classNames("eth-project-settings-panel", className)}
+      data-eth-component="ProjectSettingsPanel"
+      role="region"
+      aria-labelledby={titleId}
+      tabIndex={-1}
+    >
+      <header className="eth-project-settings-panel__header">
+        <div className="eth-project-settings-panel__heading">
+          <p className="eth-project-settings-panel__eyebrow">Project management</p>
+          <h2 id={titleId}>Project settings</h2>
+          <p>Manage identity, access defaults, members, and the project agent model.</p>
+        </div>
+        <dl className="eth-project-settings-panel__summary" aria-label="Project settings summary">
+          <div>
+            <dt>Visibility</dt>
+            <dd>{optionLabel(permissionOptions, permissionMode)}</dd>
+          </div>
+          <div>
+            <dt>Members</dt>
+            <dd>{countLabel(members.length, "member")}</dd>
+          </div>
+          <div>
+            <dt>Model</dt>
+            <dd>{optionLabel(modelOptions, model)}</dd>
+          </div>
+        </dl>
+      </header>
+
+      <div className="eth-project-settings-panel__content">
+        <FormSection title="General" description="Core project identity and description.">
+          <div className="eth-project-settings-panel__stack">
+            <FormField
+              id="project-settings-name"
+              label="Project name"
+              helperText="Shown in project lists, audit records, and app-domain routing."
+            >
+              <TextInput
+                value={settings.name ?? ""}
+                onChange={(event) => update({ name: event.currentTarget.value })}
+              />
+            </FormField>
+            <FormField
+              id="project-settings-description"
+              label="Description"
+              helperText="Brief context for collaborators and project agents."
+            >
+              <Textarea
+                value={settings.description ?? ""}
+                rows={4}
+                onChange={(event) => update({ description: event.currentTarget.value })}
+              />
+            </FormField>
+          </div>
+        </FormSection>
+
+        <FormSection title="Members" description="People who can work in this project.">
+          <div className="eth-project-settings-panel__members">
+            <div className="eth-project-settings-panel__member-meta">
+              <span>{countLabel(members.length, "active member")}</span>
+              <span>Default role: {optionLabel(roleOptions, defaultRole)}</span>
+            </div>
+            {members.length ? (
+              <div className="eth-project-settings-panel__member-list" role="list">
+                {members.map((member) => {
+                  const label = nodeText(member.label);
+                  return (
+                    <article
+                      key={member.id}
+                      className="eth-project-settings-panel__member-row"
+                      role="listitem"
+                    >
+                      <span
+                        className="eth-project-settings-panel__member-avatar"
+                        aria-hidden="true"
+                      >
+                        {memberInitials(member.label)}
+                      </span>
+                      <div className="eth-project-settings-panel__member-main">
+                        <strong>{member.label}</strong>
+                        <span>Project collaborator</span>
+                      </div>
+                      <Select
+                        aria-label={`Role for ${label}`}
+                        options={roleOptions}
+                        value={member.role ?? defaultRole}
+                        onChange={(event) => updateMemberRole(member.id, event.currentTarget.value)}
+                      />
+                    </article>
+                  );
+                })}
+              </div>
+            ) : (
+              <p className="eth-project-settings-panel__empty">
+                Members added to this project will appear here with their assigned role.
+              </p>
+            )}
+          </div>
+        </FormSection>
+
+        <FormSection title="Permissions" description="Default access policy for project resources.">
+          <div className="eth-project-settings-panel__field-grid">
+            <FormField
+              id="project-settings-permission-mode"
+              label="Visibility"
+              helperText="Controls the default project audience."
+            >
+              <Select
+                options={permissionOptions}
+                value={permissionMode}
+                onChange={(event) => update({ permissionMode: event.currentTarget.value })}
+              />
+            </FormField>
+            <FormField
+              id="project-settings-default-role"
+              label="Default member role"
+              helperText="Applied when a member has no explicit role."
+            >
+              <Select
+                options={roleOptions}
+                value={defaultRole}
+                onChange={(event) => update({ defaultRole: event.currentTarget.value })}
+              />
+            </FormField>
+          </div>
+        </FormSection>
+
+        <FormSection title="Model config" description="Default provider and model for project agents.">
+          <div className="eth-project-settings-panel__field-grid">
+            <FormField
+              id="project-settings-provider"
+              label="Provider"
+              helperText="Runtime provider for project-level agents."
+            >
+              <Select
+                options={providerOptions}
+                value={modelProvider}
+                onChange={(event) => update({ modelProvider: event.currentTarget.value })}
+              />
+            </FormField>
+            <FormField
+              id="project-settings-model"
+              label="Model"
+              helperText="Used when an agent has no override."
+            >
+              <Select
+                options={modelOptions}
+                value={model}
+                onChange={(event) => update({ model: event.currentTarget.value })}
+              />
+            </FormField>
+          </div>
+        </FormSection>
+      </div>
+    </section>
+  );
+}