@echothink-ui/project 0.1.0

package/src/components/ProjectMembersPanel.tsx

@@ -0,0 +1,181 @@
+import * as React from "react";
+import {
+  Button,
+  EmptyState,
+  Select,
+  StatusDot,
+  statusLabel,
+  type EthAction,
+  type EthOperationalStatus
+} from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import { PlusIcon } from "@echothink-ui/icons";
+import type { ProjectBaseProps, ProjectMember } from "../types";
+import { classNames, formatNumber, projectHtmlProps } from "../utils";
+
+export interface ProjectMembersPanelProps extends ProjectBaseProps {
+  members?: ProjectMember[];
+  roles?: string[];
+  onAdd?: () => void;
+  onRemove?: (memberId: string) => void;
+  onChangeRole?: (memberId: string, role: string) => void;
+}
+
+const defaultRoleValues = ["owner", "editor", "viewer"];
+const defaultMemberStatus: EthOperationalStatus = "active";
+const pendingMemberStatuses = new Set<EthOperationalStatus>([
+  "queued",
+  "pending-approval",
+  "not-started"
+]);
+
+function roleLabel(role: string) {
+  return role
+    .replace(/[-_]+/g, " ")
+    .replace(/\b\w/g, (character) => character.toUpperCase());
+}
+
+function memberInitials(label: React.ReactNode) {
+  if (typeof label !== "string" && typeof label !== "number") return "M";
+  const words = String(label).trim().split(/\s+/).filter(Boolean);
+  const first = words[0]?.charAt(0) ?? "";
+  const last = words.length > 1 ? (words[words.length - 1]?.charAt(0) ?? "") : "";
+  return `${first}${last}`.toUpperCase() || "M";
+}
+
+function memberStatus(member: ProjectMember) {
+  return member.status ?? defaultMemberStatus;
+}
+
+function memberStatusLabel(status: EthOperationalStatus) {
+  if (status === "pending-approval") return "Pending invite";
+  if (status === "not-started" || status === "queued") return "Invited";
+  return statusLabel(status);
+}
+
+export function ProjectMembersPanel({
+  members = [],
+  roles = [],
+  onAdd,
+  onRemove,
+  onChangeRole,
+  className,
+  title = "Members",
+  ...props
+}: ProjectMembersPanelProps) {
+  const roleOptions = React.useMemo(() => {
+    const roleValues = new Set(roles.length ? roles : defaultRoleValues);
+    for (const member of members) {
+      roleValues.add(member.role);
+    }
+    return Array.from(roleValues).map((role) => ({ value: role, label: roleLabel(role) }));
+  }, [members, roles]);
+
+  const ownerCount = members.filter((member) => member.role.toLowerCase() === "owner").length;
+  const pendingCount = members.filter((member) =>
+    pendingMemberStatuses.has(memberStatus(member))
+  ).length;
+
+  const columns = React.useMemo<DataColumn<ProjectMember>[]>(
+    () => [
+      {
+        key: "label",
+        header: "Member",
+        width: "44%",
+        render: (member) => (
+          <div className="eth-project-members-panel__member">
+            {member.avatar ? (
+              <img className="eth-project-members-panel__avatar" src={member.avatar} alt="" />
+            ) : (
+              <span className="eth-project-members-panel__avatar" aria-hidden="true">
+                {memberInitials(member.label)}
+              </span>
+            )}
+            <strong>{member.label}</strong>
+          </div>
+        )
+      },
+      {
+        key: "role",
+        header: "Role",
+        width: "24%",
+        render: (member) =>
+          onChangeRole ? (
+            <Select
+              aria-label={`Role for ${String(member.label)}`}
+              className="eth-project-members-panel__role-select"
+              density="compact"
+              options={roleOptions}
+              value={member.role}
+              onChange={(event) => onChangeRole(member.id, event.currentTarget.value)}
+            />
+          ) : (
+            <span className="eth-project-members-panel__role-badge">{roleLabel(member.role)}</span>
+          )
+      },
+      {
+        key: "status",
+        header: "Status",
+        width: "20%",
+        render: (member) => {
+          const status = memberStatus(member);
+          return <StatusDot status={status} label={memberStatusLabel(status)} />;
+        }
+      }
+    ],
+    [onChangeRole, roleOptions]
+  );
+
+  const rowActions = React.useCallback(
+    (member: ProjectMember): EthAction[] =>
+      onRemove
+        ? [{ id: "remove", label: "Remove", intent: "danger", onSelect: () => onRemove(member.id) }]
+        : [],
+    [onRemove]
+  );
+
+  return (
+    <section
+      {...projectHtmlProps(props)}
+      className={classNames("eth-project-members-panel", className)}
+      data-eth-component="ProjectMembersPanel"
+      role="region"
+      aria-label={typeof title === "string" ? title : "Project members"}
+      tabIndex={-1}
+    >
+      <header className="eth-project-members-panel__header">
+        <div className="eth-project-members-panel__heading">
+          {title ? <h3>{title}</h3> : null}
+          <dl className="eth-project-members-panel__summary" aria-label="Member summary">
+            <div>
+              <dt>Members</dt>
+              <dd>{formatNumber(members.length)}</dd>
+            </div>
+            <div>
+              <dt>Owners</dt>
+              <dd>{formatNumber(ownerCount)}</dd>
+            </div>
+            <div>
+              <dt>Pending</dt>
+              <dd>{formatNumber(pendingCount)}</dd>
+            </div>
+          </dl>
+        </div>
+        {onAdd ? (
+          <Button density="compact" icon={<PlusIcon />} intent="primary" onClick={onAdd}>
+            Add member
+          </Button>
+        ) : null}
+      </header>
+      <DataTable
+        rows={members}
+        columns={columns}
+        rowKey="id"
+        density="compact"
+        className="eth-project-members-panel__table"
+        rowActions={onRemove ? rowActions : undefined}
+        emptyState={<EmptyState title="No members" description="Project members appear here." />}
+      />
+    </section>
+  );
+}

package/src/components/ProjectModelConfigPanel.tsx

@@ -0,0 +1,294 @@
+import * as React from "react";
+import { FormField, NumberInput, Select, Slider } from "@echothink-ui/core";
+import type {
+  ProjectBaseProps,
+  ProjectModelConfig,
+  ProjectModelProvider
+} from "../types";
+import { classNames, formatNumber, projectHtmlProps } from "../utils";
+
+export interface ProjectModelConfigPanelProps extends ProjectBaseProps {
+  providers?: Array<string | ProjectModelProvider>;
+  selectedProvider?: string;
+  model?: string;
+  params?: ProjectModelConfig["params"];
+  onChange?: (config: ProjectModelConfig) => void;
+}
+
+function normalizeProvider(provider: string | ProjectModelProvider): ProjectModelProvider {
+  return typeof provider === "string" ? { id: provider, label: provider } : provider;
+}
+
+type ProjectModelParamKey = keyof NonNullable<ProjectModelConfig["params"]>;
+
+interface ProjectModelParamDefinition {
+  key: ProjectModelParamKey;
+  label: string;
+  description: string;
+  min: number;
+  max: number;
+  step: number;
+  defaultValue: number;
+  control: "slider" | "number";
+}
+
+const PARAMETER_DEFINITIONS: ProjectModelParamDefinition[] = [
+  {
+    key: "temperature",
+    label: "Temperature",
+    description: "Controls response randomness.",
+    min: 0,
+    max: 2,
+    step: 0.1,
+    defaultValue: 0.2,
+    control: "slider"
+  },
+  {
+    key: "topP",
+    label: "Top P",
+    description: "Limits nucleus sampling to a cumulative probability threshold.",
+    min: 0,
+    max: 1,
+    step: 0.05,
+    defaultValue: 1,
+    control: "slider"
+  },
+  {
+    key: "maxTokens",
+    label: "Max tokens",
+    description: "Caps the response length for project agent runs.",
+    min: 1,
+    max: 200000,
+    step: 1,
+    defaultValue: 4096,
+    control: "number"
+  }
+];
+
+export function ProjectModelConfigPanel({
+  providers = [],
+  selectedProvider,
+  model,
+  params = {},
+  onChange,
+  className,
+  title = "Project model configuration",
+  description = "Default provider, model, and generation limits for project agents.",
+  ...props
+}: ProjectModelConfigPanelProps) {
+  const generatedId = React.useId();
+  const headingId = `eth-project-model-config-panel-${generatedId}`;
+  const normalizedProviders = providers.map(normalizeProvider);
+  const requestedProvider = selectedProvider ?? normalizedProviders[0]?.id ?? "";
+  const activeProviderData =
+    normalizedProviders.find((provider) => provider.id === requestedProvider) ??
+    normalizedProviders[0];
+  const activeProvider = activeProviderData?.id ?? requestedProvider;
+  const modelOptions = activeProviderData?.models ?? [];
+  const requestedModel = model ?? modelOptions[0]?.id ?? "";
+  const activeModelData =
+    modelOptions.find((option) => option.id === requestedModel) ?? modelOptions[0];
+  const activeModel = activeModelData?.id ?? requestedModel;
+  const providerOptions = normalizedProviders.length
+    ? normalizedProviders.map((provider) => ({
+        value: provider.id,
+        label: provider.label
+      }))
+    : [{ value: "", label: "No providers available", disabled: true }];
+  const modelSelectOptions = modelOptions.length
+    ? modelOptions.map((option) => ({ value: option.id, label: option.label }))
+    : [
+        {
+          value: "",
+          label: activeProvider ? "No models available" : "Select a provider first",
+          disabled: true
+        }
+      ];
+  const providerHelperText = normalizedProviders.length
+    ? `${normalizedProviders.length} configured ${
+        normalizedProviders.length === 1 ? "provider" : "providers"
+      }.`
+    : "Add a provider before selecting a project model.";
+  const modelHelperText = modelOptions.length
+    ? `${modelOptions.length} available ${modelOptions.length === 1 ? "model" : "models"} for ${
+        activeProviderData?.label ?? "this provider"
+      }.`
+    : "No selectable models are configured for this provider.";
+  const tokenLimit = params.maxTokens ?? PARAMETER_DEFINITIONS[2].defaultValue;
+
+  const emit = (patch: ProjectModelConfig) => {
+    const hasProviderPatch = Object.prototype.hasOwnProperty.call(patch, "provider");
+    const hasModelPatch = Object.prototype.hasOwnProperty.call(patch, "model");
+    const nextParams = { ...params, ...patch.params };
+    onChange?.({
+      provider: hasProviderPatch ? patch.provider : activeProvider,
+      model: hasModelPatch ? patch.model : activeModel,
+      params: nextParams
+    });
+  };
+
+  const updateParam = (key: ProjectModelParamKey, value: number | undefined) => {
+    emit({ params: { [key]: value } as ProjectModelConfig["params"] });
+  };
+
+  return (
+    <section
+      {...projectHtmlProps(props)}
+      className={classNames("eth-project-model-config-panel", className)}
+      data-eth-component="ProjectModelConfigPanel"
+      role="region"
+      aria-labelledby={headingId}
+      tabIndex={-1}
+    >
+      <header className="eth-project-model-config-panel__header">
+        <div className="eth-project-model-config-panel__heading">
+          <h3 id={headingId}>{title}</h3>
+          {description ? <p>{description}</p> : null}
+        </div>
+        <dl className="eth-project-model-config-panel__summary" aria-label="Selected model summary">
+          <div>
+            <dt>Provider</dt>
+            <dd>{activeProviderData?.label ?? "Not configured"}</dd>
+          </div>
+          <div>
+            <dt>Model</dt>
+            <dd>{activeModelData?.label ?? (activeModel || "Default model")}</dd>
+          </div>
+          <div>
+            <dt>Max tokens</dt>
+            <dd>{formatNumber(tokenLimit)}</dd>
+          </div>
+        </dl>
+      </header>
+
+      <div className="eth-project-model-config-panel__selectors">
+        <FormField id="project-model-provider" label="Provider" helperText={providerHelperText}>
+          <Select
+            options={providerOptions}
+            value={activeProvider}
+            disabled={!normalizedProviders.length}
+            onChange={(event) => {
+              const nextProvider = normalizedProviders.find(
+                (provider) => provider.id === event.currentTarget.value
+              );
+
+              emit({
+                provider: event.currentTarget.value,
+                model: nextProvider?.models?.[0]?.id
+              });
+            }}
+          />
+        </FormField>
+        <FormField id="project-model-model" label="Model" helperText={modelHelperText}>
+          <Select
+            options={modelSelectOptions}
+            value={activeModel}
+            disabled={!modelOptions.length}
+            onChange={(event) => emit({ model: event.currentTarget.value })}
+          />
+        </FormField>
+      </div>
+
+      <div
+        className="eth-project-model-config-panel__parameters"
+        role="group"
+        aria-label="Generation parameters"
+      >
+        {PARAMETER_DEFINITIONS.map((definition) => (
+          <ProjectModelParamControl
+            key={definition.key}
+            definition={definition}
+            value={params[definition.key] ?? definition.defaultValue}
+            onChange={(value) => updateParam(definition.key, value)}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function ProjectModelParamControl({
+  definition,
+  value,
+  onChange
+}: {
+  definition: ProjectModelParamDefinition;
+  value: number;
+  onChange: (value: number | undefined) => void;
+}) {
+  const id = `project-model-${definition.key}`;
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const nextValue = Number(event.currentTarget.value);
+    if (Number.isFinite(nextValue)) onChange(nextValue);
+  };
+
+  const handleNumberChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const nextValue =
+      event.currentTarget.value === "" ? undefined : Number(event.currentTarget.value);
+
+    if (nextValue === undefined || Number.isFinite(nextValue)) onChange(nextValue);
+  };
+
+  return (
+    <div className="eth-project-model-config-panel__parameter">
+      <div className="eth-project-model-config-panel__parameter-copy">
+        <h4 id={labelId}>{definition.label}</h4>
+        <p id={descriptionId}>{definition.description}</p>
+        <dl className="eth-project-model-config-panel__parameter-meta">
+          <div>
+            <dt>Range</dt>
+            <dd>
+              {formatParamValue(definition.min, definition.step)} -{" "}
+              {formatParamValue(definition.max, definition.step)}
+            </dd>
+          </div>
+          <div>
+            <dt>Current</dt>
+            <dd>{formatParamValue(value, definition.step)}</dd>
+          </div>
+        </dl>
+      </div>
+      <div className="eth-project-model-config-panel__parameter-control">
+        {definition.control === "number" ? (
+          <NumberInput
+            id={`${id}-input`}
+            aria-describedby={descriptionId}
+            aria-labelledby={labelId}
+            density="compact"
+            hideLabel
+            labelText={definition.label}
+            min={definition.min}
+            max={definition.max}
+            step={definition.step}
+            value={value}
+            onChange={handleNumberChange}
+          />
+        ) : (
+          <Slider
+            id={`${id}-slider`}
+            aria-describedby={descriptionId}
+            aria-labelledby={labelId}
+            hideLabel
+            labelText={definition.label}
+            min={definition.min}
+            max={definition.max}
+            step={definition.step}
+            value={value}
+            onChange={handleChange}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function formatParamValue(value: number, step: number) {
+  const maximumFractionDigits = step >= 1 ? 0 : String(step).split(".")[1]?.length ?? 2;
+
+  return new Intl.NumberFormat("en-US", {
+    maximumFractionDigits
+  }).format(value);
+}

package/src/components/ProjectPermissionPanel.tsx

@@ -0,0 +1,174 @@
+import * as React from "react";
+import { Badge, Checkbox, EmptyState } from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { ProjectBaseProps, ProjectPermissionEntity } from "../types";
+import { classNames, projectHtmlProps, entityId, entityLabel, permissionKey } from "../utils";
+
+interface ProjectPermissionRow extends Record<string, unknown> {
+  id: string;
+  subject: ProjectPermissionEntity;
+  resource: ProjectPermissionEntity;
+}
+
+export interface ProjectPermissionPanelProps extends ProjectBaseProps {
+  subjects?: ProjectPermissionEntity[];
+  resources?: ProjectPermissionEntity[];
+  actions?: ProjectPermissionEntity[];
+  assignments?: Record<string, boolean>;
+  onChange?: (key: string, granted: boolean) => void;
+}
+
+export function ProjectPermissionPanel({
+  subjects = [],
+  resources = [],
+  actions = [],
+  assignments = {},
+  onChange,
+  title = "Project permissions",
+  description = "Review subject access by resource and action.",
+  density = "compact",
+  className,
+  ...props
+}: ProjectPermissionPanelProps) {
+  const hasMatrix = subjects.length > 0 && resources.length > 0 && actions.length > 0;
+  const editable = Boolean(onChange);
+  const rows = React.useMemo<ProjectPermissionRow[]>(
+    () =>
+      subjects.flatMap((subject) =>
+        resources.map((resource) => ({
+          id: `${entityId(subject)}:${entityId(resource)}`,
+          subject,
+          resource
+        }))
+      ),
+    [resources, subjects]
+  );
+  const totalPermissions = subjects.length * resources.length * actions.length;
+  const grantedCount = React.useMemo(
+    () =>
+      subjects.reduce(
+        (subjectTotal, subject) =>
+          subjectTotal +
+          resources.reduce(
+            (resourceTotal, resource) =>
+              resourceTotal +
+              actions.filter((action) => assignments[permissionKey(subject, resource, action)])
+                .length,
+            0
+          ),
+        0
+      ),
+    [actions, assignments, resources, subjects]
+  );
+  const missingCount = Math.max(totalPermissions - grantedCount, 0);
+
+  const columns = React.useMemo<DataColumn<ProjectPermissionRow>[]>(
+    () => [
+      {
+        key: "subject",
+        header: "Subject",
+        width: "12rem",
+        render: (row) => (
+          <strong className="eth-project-permission-panel__subject">
+            {entityLabel(row.subject)}
+          </strong>
+        )
+      },
+      {
+        key: "resource",
+        header: "Resource",
+        width: "12rem",
+        render: (row) => (
+          <span className="eth-project-permission-panel__resource">
+            {entityLabel(row.resource)}
+          </span>
+        )
+      },
+      ...actions.map<DataColumn<ProjectPermissionRow>>((action) => ({
+        key: `permission-${entityId(action)}`,
+        header: entityLabel(action),
+        width: "9rem",
+        align: "center",
+        render: (row) => {
+          const key = permissionKey(row.subject, row.resource, action);
+          const granted = Boolean(assignments[key]);
+          const label = `${entityText(action)} permission for ${entityText(
+            row.subject
+          )} on ${entityText(row.resource)}`;
+
+          return editable ? (
+            <Checkbox
+              aria-label={label}
+              className="eth-project-permission-panel__toggle"
+              hideLabel
+              label={label}
+              checked={granted}
+              onChange={(event) => onChange?.(key, event.currentTarget.checked)}
+            />
+          ) : (
+            <Badge
+              className="eth-project-permission-panel__state"
+              severity={granted ? "success" : "neutral"}
+            >
+              {granted ? "Granted" : "Not granted"}
+            </Badge>
+          );
+        }
+      }))
+    ],
+    [actions, assignments, editable, onChange]
+  );
+
+  return (
+    <section
+      {...projectHtmlProps(props)}
+      className={classNames("eth-project-permission-panel", className)}
+      data-eth-component="ProjectPermissionPanel"
+      role="region"
+      aria-label={typeof title === "string" && title ? title : "Project permissions"}
+      tabIndex={-1}
+    >
+      <header className="eth-project-permission-panel__header">
+        <div className="eth-project-permission-panel__heading">
+          {title ? <h3>{title}</h3> : null}
+          {description ? <p>{description}</p> : null}
+        </div>
+        {hasMatrix ? (
+          <dl
+            className="eth-project-permission-panel__summary"
+            aria-label="Project permission summary"
+          >
+            <div>
+              <dt>Granted</dt>
+              <dd>{grantedCount}</dd>
+            </div>
+            <div>
+              <dt>Not granted</dt>
+              <dd>{missingCount}</dd>
+            </div>
+            <div>
+              <dt>Actions</dt>
+              <dd>{actions.length}</dd>
+            </div>
+          </dl>
+        ) : null}
+      </header>
+      {hasMatrix ? (
+        <DataTable rows={rows} columns={columns} rowKey="id" density={density} />
+      ) : (
+        <div className="eth-project-permission-panel__empty">
+          <EmptyState
+            title="No permissions"
+            description="Subjects, resources, and actions are required to render a permission matrix."
+          />
+        </div>
+      )}
+    </section>
+  );
+}
+
+function entityText(entity: ProjectPermissionEntity) {
+  const label = entityLabel(entity);
+  if (typeof label === "string" || typeof label === "number") return String(label);
+  return entityId(entity);
+}