@skillcdn/console 0.1.13 → 0.1.15

package/src/console.tsx

@@ -9,10 +9,13 @@ import {
 } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import {
+  ApiError,
   type ConsoleClient,
   createClient,
   type FileUpload,
   OPEN_TASK_STATES,
+  PROJECT_RULES_TEMPLATE,
+  REFERENCE_RULES,
   type RestAnswerInput,
   type RestDecision,
   type RestDecisionInput,
@@ -21,11 +24,15 @@ import {
   type RestProject,
   type RestProjectInput,
   type RestProjectPatch,
+  type RestProjectRules,
+  type RestRules,
   type RestTask,
   type RestTaskInput,
   type RestToken,
   type RestTokenCreated,
   type RestWork,
+  RULES_PATH,
+  RULES_TITLE,
   type TaskState,
 } from "./api.js";
 import { Board, BoardFilters, type BoardProps, byDue, filterTasks } from "./components/board.js";
@@ -36,7 +43,7 @@ import { DecisionForm } from "./components/decision-form.js";
 import { DecisionCard, DecisionList, type DecisionListProps } from "./components/decision-list.js";
 import { EventFeed, type EventFeedProps } from "./components/event-feed.js";
 import { GoalForm, GoalList, type GoalListProps, GoalView } from "./components/goals.js";
-import { PeopleList, type PeopleListProps } from "./components/people.js";
+import { ListingForm, PeopleList, type PeopleListProps } from "./components/people.js";
 import {
   MemberList,
   type MemberListProps,
@@ -45,6 +52,7 @@ import {
   type ProjectListProps,
   ProjectMark,
 } from "./components/projects.js";
+import { RulesForm, RulesView } from "./components/rules.js";
 import {
   type Brand,
   isPlainClick,
@@ -58,7 +66,14 @@ import { TaskForm } from "./components/task-form.js";
 import { TaskList } from "./components/task-list.js";
 import { TaskView, type TaskViewProps } from "./components/task-view.js";
 import { NewToken, TokenForm, TokenList, type TokenListProps } from "./components/tokens.js";
-import { Button, Callout, EmptyState, personName, Spinner } from "./components/ui.js";
+import {
+  Button,
+  Callout,
+  CategoryBadge,
+  EmptyState,
+  personName,
+  Spinner,
+} from "./components/ui.js";
 import { WorkList, type WorkListProps } from "./components/work.js";
 import { ConnectPage } from "./connect-page.js";
 import { type ConsoleData, useConsoleData } from "./data.js";
@@ -86,11 +101,15 @@ import {
   newTaskHref,
   PATHS,
   personAgentsHref,
+  personWorkHref,
   projectHref,
+  projectSettingsHref,
   type Route,
+  settingsHref,
   signInFailureOf,
   taskHref,
   withoutSignInParam,
+  workHref,
 } from "./router.js";
 import { projectPath } from "./routes.js";
 import { errorWords, useAction } from "./use-action.js";
@@ -384,12 +403,13 @@ function ProjectsPage(props: {
           </LinkButton>
         )}
       </div>
-      <p className="sc-lead">{words.lead}</p>
       {error !== undefined && <Callout tone="danger">{error}</Callout>}
       {making && (
         <section className="sc-panel sc-panel-form" aria-label={words.form.aria}>
           <ProjectForm
             busy={busy}
+            skillsSource={data.me?.workspace.skills.source}
+            organizationAddress={data.me?.workspace.skills.address ?? null}
             onSubmit={(input, icon) =>
               void act(async () => {
                 const made = await data.actions.createProject(
@@ -476,7 +496,7 @@ function TaskPage(props: {
   return (
     <components.TaskView
       task={task}
-      people={data.people}
+      people={data.people.filter(inWorkspace)}
       tasks={data.tasks}
       decisions={data.decisions}
       runs={data.runs}
@@ -558,7 +578,7 @@ function ProjectPage(props: {
             filter={route.filter}
             categories={data.categories}
             goals={data.goals}
-            people={data.people}
+            people={data.people.filter(inWorkspace)}
             me={me}
             shown={shown.length}
             total={data.tasks.length}
@@ -592,7 +612,7 @@ function ProjectPage(props: {
         {error !== undefined && <Callout tone="danger">{error}</Callout>}
         <section className="sc-panel sc-panel-form" aria-label={words.task.newAria}>
           <TaskForm
-            people={data.people}
+            people={data.people.filter(inWorkspace)}
             parents={data.tasks}
             categories={data.categories}
             goals={data.goals}
@@ -640,13 +660,12 @@ function ProjectPage(props: {
             {words.board.writeTask}
           </LinkButton>
         </div>
-        <p className="sc-lead">{calendar.lead}</p>
         {data.tasks.length > 0 && (
           <BoardFilters
             filter={route.filter}
             categories={data.categories}
             goals={data.goals}
-            people={data.people}
+            people={data.people.filter(inWorkspace)}
             me={me}
             shown={shown.length}
             total={data.tasks.length}
@@ -690,7 +709,6 @@ function ProjectPage(props: {
         {open.length > 0 && (
           <section className="sc-task-section" aria-label={calendar.workload.title}>
             <h2 className="sc-section-title">{calendar.workload.title}</h2>
-            <p className="sc-lead">{calendar.workload.lead}</p>
             <Workload
               tasks={shown}
               today={now}
@@ -719,7 +737,6 @@ function ProjectPage(props: {
             </LinkButton>
           )}
         </div>
-        <p className="sc-lead">{roadmap.lead}</p>
         {error !== undefined && <Callout tone="danger">{error}</Callout>}
         {making && (
           <section className="sc-panel sc-panel-form" aria-label={roadmap.setGoalAria}>
@@ -919,6 +936,10 @@ function ProjectPage(props: {
             if (event.goalId !== null) {
               return goalHref(key, event.goalId);
             }
+            // The rules are a page shown on the settings, not among the documents (ADR-0023).
+            if (event.data.path === RULES_PATH) {
+              return projectSettingsHref(key);
+            }
             return event.data.path === undefined ? undefined : toDoc(event.data.path);
           }}
           empty={<EmptyState title={words.feed.empty} />}
@@ -945,14 +966,11 @@ function ProjectPage(props: {
         <div className="sc-page-head">
           <h1 className="sc-page-title">{members.title}</h1>
         </div>
-        <p className="sc-lead">
-          {project.visibility === "workspace" ? members.leadWorkspace : members.leadPrivate}{" "}
-          {members.leadRoles}
-        </p>
+        <p className="sc-lead">{words.vocabulary.visibility[project.visibility]}</p>
         {error !== undefined && <Callout tone="danger">{error}</Callout>}
         <components.MemberList
           members={data.members}
-          people={data.people}
+          people={data.people.filter(inWorkspace)}
           me={me}
           busy={busy}
           onAdd={configures ? (input) => void act(() => data.actions.addMember(input)) : undefined}
@@ -967,6 +985,7 @@ function ProjectPage(props: {
               ? (member) => void act(() => data.actions.removeMember(member.person.id))
               : undefined
           }
+          workHref={owner ? (member) => personWorkHref(member.person.id) : undefined}
           empty={
             <EmptyState
               title={members.empty.title}
@@ -980,25 +999,71 @@ function ProjectPage(props: {
     );
   }
   if (route.name === "settings") {
-    const settings = words.projects.settings;
+    return (
+      <ProjectSettingsPage route={route} project={project} data={data} navigation={navigation} />
+    );
+  }
+  return <NothingHere />;
+}
+
+/**
+ * A project's settings (ADR-0023): read by every member, so that everyone sees what the project
+ * is and what its agents are asked; changed by an owner, on the forms at their own addresses.
+ */
+function ProjectSettingsPage(props: {
+  readonly route: Extract<Route, { name: "settings" }>;
+  readonly project: RestProject;
+  readonly data: ConsoleData;
+  readonly navigation: Navigation;
+}) {
+  const words = useWords();
+  const { route, project, data, navigation } = props;
+  const { busy, error, act } = useAction();
+  const settings = words.projects.settings;
+  const form = words.projects.form;
+  const owner = project.role === "owner";
+  const key = project.key;
+  const here = projectSettingsHref(key);
+  const skills = data.me?.workspace.skills;
+  const [rules, setRules] = useState<RestProjectRules | undefined>(undefined);
+  const feedLength = data.events.length;
+  // The rules, asked for again whenever the project's feed grows.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the feed's length is the trigger
+  useEffect(() => {
+    const controller = new AbortController();
+    data.actions
+      .projectRules(controller.signal)
+      .then((found) => {
+        if (!controller.signal.aborted) {
+          setRules(found);
+        }
+      })
+      .catch(() => undefined);
+    return () => controller.abort();
+  }, [data.actions, feedLength]);
+
+  const head = (
+    <div className="sc-page-head">
+      <h1 className="sc-page-title">{settings.title}</h1>
+      {owner && route.form === undefined && (
+        <LinkButton href={projectSettingsHref(key, "edit")}>{words.common.edit}</LinkButton>
+      )}
+    </div>
+  );
+  if (route.form === "edit") {
     if (!owner) {
-      return <EmptyState title={settings.onlyOwner.title} body={settings.onlyOwner.body} />;
+      return <NothingHere />;
     }
     return (
       <>
-        <div className="sc-page-head">
-          <h1 className="sc-page-title">{settings.title}</h1>
-        </div>
-        <p className="sc-lead">
-          {settings.leadBefore}
-          <code>{project.key}</code>
-          {settings.leadAfter}
-        </p>
+        {head}
         {error !== undefined && <Callout tone="danger">{error}</Callout>}
         <section className="sc-panel sc-panel-form" aria-label={settings.aria}>
           <ProjectForm
             project={project}
             busy={busy}
+            skillsSource={skills?.source}
+            organizationAddress={skills?.address ?? null}
             onSubmit={(input, icon) =>
               void act(async () => {
                 await data.actions.updateProject(input as RestProjectPatch);
@@ -1007,17 +1072,288 @@ function ProjectPage(props: {
                 } else if (icon !== undefined) {
                   await data.actions.setProjectIcon(uploadOf(icon));
                 }
+                navigation.replace(here);
               })
             }
+            onCancel={() => navigation.back(here)}
           />
         </section>
       </>
     );
   }
-  return <NothingHere />;
+  if (route.form === "rules") {
+    if (!owner) {
+      return <NothingHere />;
+    }
+    return (
+      <>
+        {head}
+        {error !== undefined && <Callout tone="danger">{error}</Callout>}
+        <section className="sc-panel sc-panel-form" aria-label={words.rules.projectRules}>
+          {rules === undefined ? (
+            <Spinner label={words.rules.loading} />
+          ) : (
+            <RulesForm
+              rules={rules.project}
+              scope="project"
+              template={PROJECT_RULES_TEMPLATE}
+              busy={busy}
+              onSubmit={(input) =>
+                void act(async () => {
+                  await data.actions.writeDocument(RULES_PATH, {
+                    title: RULES_TITLE,
+                    body: input.body,
+                    ...(input.baseVersion === undefined ? {} : { baseVersion: input.baseVersion }),
+                  });
+                  navigation.replace(here);
+                })
+              }
+              onCancel={() => navigation.back(here)}
+            />
+          )}
+        </section>
+      </>
+    );
+  }
+  return (
+    <>
+      {head}
+      {error !== undefined && <Callout tone="danger">{error}</Callout>}
+      <section className="sc-panel" aria-label={settings.aria}>
+        <dl className="sc-facts sc-facts-plain">
+          <div>
+            <dt>{form.name}</dt>
+            <dd>{project.name}</dd>
+          </div>
+          <div>
+            <dt>{form.key}</dt>
+            <dd>
+              <code className="sc-project-key">{project.key}</code>
+            </dd>
+          </div>
+          <div>
+            <dt>{form.whoIsMember}</dt>
+            <dd>{words.vocabulary.visibility[project.visibility]}</dd>
+          </div>
+          <div>
+            <dt>{form.skillsAddress}</dt>
+            <dd>
+              {project.skillsAddress !== null ? (
+                <code>
+                  {skills?.source ?? ""}
+                  {project.skillsAddress}
+                </code>
+              ) : skills?.address != null ? (
+                settings.organizationsSkills(skills.address)
+              ) : (
+                settings.noSkills
+              )}
+            </dd>
+          </div>
+          <div>
+            <dt>{form.symbol}</dt>
+            <dd>
+              <ProjectMark project={project} size="sm" />
+            </dd>
+          </div>
+          {project.description.length > 0 && (
+            <div className="sc-facts-wide">
+              <dt>{form.description}</dt>
+              <dd>{project.description}</dd>
+            </div>
+          )}
+        </dl>
+      </section>
+      <section className="sc-panel" aria-label={words.rules.projectRules}>
+        <h2 className="sc-section-title">{words.rules.projectRules}</h2>
+        {rules === undefined ? (
+          <Spinner label={words.rules.loading} />
+        ) : (
+          <RulesView
+            rules={rules.project}
+            scope="project"
+            docHref={(path) => docHref(key, path)}
+            editHref={owner ? projectSettingsHref(key, "rules") : undefined}
+            onArchive={
+              owner
+                ? () =>
+                    void act(async () => {
+                      await data.actions.archiveDocument(RULES_PATH);
+                      setRules(await data.actions.projectRules());
+                    })
+                : undefined
+            }
+            busy={busy}
+          />
+        )}
+      </section>
+      <section className="sc-panel" aria-label={words.rules.workspaceRules}>
+        <div className="sc-section-head">
+          <h2 className="sc-section-title">{words.rules.workspaceRules}</h2>
+          <a className="sc-muted" href={settingsHref()}>
+            {words.rules.onWorkspaceSettings}
+          </a>
+        </div>
+        {rules !== undefined && <RulesView rules={rules.workspace} scope="workspace" folded />}
+      </section>
+    </>
+  );
+}
+
+/**
+ * The workspace's settings (ADR-0023): its rules, the console's own until an administrator
+ * writes the organization's; its categories, kept on their own page; and where its skills come
+ * from, which whoever runs the console set. Read by everyone; the rules written by an administrator.
+ */
+function WorkspaceSettingsPage(props: {
+  readonly form: "rules" | undefined;
+  readonly data: ConsoleData;
+  readonly navigation: Navigation;
+}) {
+  const words = useWords();
+  const { form, data, navigation } = props;
+  const { busy, error, act } = useAction();
+  const administrator = data.me?.person?.role === "admin";
+  const skills = data.me?.workspace.skills;
+  const [rules, setRules] = useState<RestRules | undefined>(undefined);
+  useEffect(() => {
+    const controller = new AbortController();
+    data.actions
+      .rules(controller.signal)
+      .then((found) => {
+        if (!controller.signal.aborted) {
+          setRules(found);
+        }
+      })
+      .catch(() => undefined);
+    return () => controller.abort();
+  }, [data.actions]);
+
+  const head = (
+    <div className="sc-page-head">
+      <h1 className="sc-page-title">{words.settings.title}</h1>
+    </div>
+  );
+  if (form === "rules") {
+    if (!administrator) {
+      return <NothingHere />;
+    }
+    return (
+      <>
+        {head}
+        {error !== undefined && <Callout tone="danger">{error}</Callout>}
+        <section className="sc-panel sc-panel-form" aria-label={words.rules.title}>
+          {rules === undefined ? (
+            <Spinner label={words.rules.loading} />
+          ) : (
+            <RulesForm
+              rules={rules}
+              scope="workspace"
+              template={REFERENCE_RULES}
+              busy={busy}
+              onSubmit={(input) =>
+                void act(async () => {
+                  setRules(
+                    await data.actions.writeRules({
+                      body: input.body,
+                      ...(input.baseVersion === undefined
+                        ? {}
+                        : { baseVersion: input.baseVersion }),
+                    }),
+                  );
+                  navigation.replace(PATHS.settings);
+                })
+              }
+              onCancel={() => navigation.back(PATHS.settings)}
+              onReset={() =>
+                void act(async () => {
+                  setRules(await data.actions.archiveRules());
+                  navigation.replace(PATHS.settings);
+                })
+              }
+            />
+          )}
+        </section>
+      </>
+    );
+  }
+  return (
+    <>
+      {head}
+      {error !== undefined && <Callout tone="danger">{error}</Callout>}
+      <section className="sc-panel" aria-label={words.rules.title}>
+        <h2 className="sc-section-title">{words.rules.title}</h2>
+        {rules === undefined ? (
+          <Spinner label={words.rules.loading} />
+        ) : (
+          <RulesView
+            rules={rules}
+            scope="workspace"
+            editHref={administrator ? settingsHref("rules") : undefined}
+            onArchive={
+              administrator
+                ? () =>
+                    void act(async () => {
+                      setRules(await data.actions.archiveRules());
+                    })
+                : undefined
+            }
+            busy={busy}
+          />
+        )}
+      </section>
+      <section className="sc-panel" aria-label={words.settings.categories}>
+        <h2 className="sc-section-title">{words.settings.categories}</h2>
+        {data.categories.length > 0 && (
+          <p className="sc-category-chips">
+            {data.categories.map((category) => (
+              <CategoryBadge key={category.key} category={category} />
+            ))}
+          </p>
+        )}
+        <LinkButton href={PATHS.categories}>{words.settings.manageCategories}</LinkButton>
+      </section>
+      {skills !== undefined && (
+        <section className="sc-panel" aria-label={words.settings.skills}>
+          <h2 className="sc-section-title">{words.settings.skills}</h2>
+          <dl className="sc-facts sc-facts-plain">
+            <div>
+              <dt>{words.settings.skillsSource}</dt>
+              <dd>
+                <a href={skills.source} target="_blank" rel="noopener noreferrer">
+                  {skills.source}
+                </a>
+              </dd>
+            </div>
+            <div>
+              <dt>{words.settings.skillsAddress}</dt>
+              <dd>
+                {skills.address === null ? (
+                  words.settings.noSkillsAddress
+                ) : (
+                  <a
+                    href={`${skills.source}${skills.address}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <code>{skills.address}</code>
+                  </a>
+                )}
+              </dd>
+            </div>
+          </dl>
+          <p className="sc-muted">{words.settings.skillsFromConfiguration}</p>
+        </section>
+      )}
+    </>
+  );
 }
 
 /** A file a person chose, as the client sends it: its name, its bytes and the type the browser says. */
+/** Whether a person is in: who a picker of assignees and of members offers (ADR-0022). */
+const inWorkspace = (person: { readonly status: "active" | "deactivated" }): boolean =>
+  person.status === "active";
+
 const uploadOf = (file: File): FileUpload => ({
   name: file.name,
   bytes: file,
@@ -1082,9 +1418,6 @@ function PersonAgentsPage(props: {
         </h1>
         <LinkButton href={PATHS.people}>{words.nav.people}</LinkButton>
       </div>
-      <p className="sc-lead">
-        {words.people.agentsLead(person?.name ?? person?.login ?? words.feed.someone)}
-      </p>
       {error !== undefined && <Callout tone="danger">{error}</Callout>}
       {tokens === undefined ? (
         <div className="sc-loading">
@@ -1107,55 +1440,149 @@ function PersonAgentsPage(props: {
   );
 }
 
-/** What is on the person's plate, across their projects: read when the page is opened. */
-function WorkPage(props: { readonly data: ConsoleData; readonly components: ConsoleComponents }) {
+/** What a plate's page shows: the tasks, and the decisions waiting on the person's own. */
+interface Plate {
+  readonly tasks: RestWork["tasks"];
+  readonly decisions?: RestWork["decisions"] | undefined;
+}
+
+/**
+ * A plate, read when the page is opened: the person's own, or another person's for whoever
+ * oversees them. The week at the top is the address's.
+ */
+function PlatePage(props: {
+  readonly components: ConsoleComponents;
+  /** Reads the plate; stable across renders, since the page reads again whenever it changes. */
+  readonly load: (signal: AbortSignal) => Promise<Plate>;
+  readonly title: string;
+  /** What stands beside the title: the way back, on another person's plate. */
+  readonly aside?: ReactNode;
+  /** A day of the week shown at the top, from the address; today's week when it names none. */
+  readonly week: string | undefined;
+  readonly weekHref: (day: string) => string;
+  readonly loading: string;
+  readonly couldNotLoad: string;
+  readonly empty: { readonly title: string; readonly body: string };
+  /** What a refusal says where the plate may not be the asker's to see; the server's words otherwise. */
+  readonly refused?: { readonly title: string; readonly body: string } | undefined;
+}) {
   const words = useWords();
-  const { data, components } = props;
-  const [work, setWork] = useState<RestWork | undefined>(undefined);
+  const { components, load, couldNotLoad, refused } = props;
+  const [plate, setPlate] = useState<Plate | undefined>(undefined);
   const [problem, setProblem] = useState<string | undefined>(undefined);
-  const { work: load } = data.actions;
-  const couldNotLoad = words.work.couldNotLoad;
+  const [forbidden, setForbidden] = useState(false);
   useEffect(() => {
     const controller = new AbortController();
+    setPlate(undefined);
+    setProblem(undefined);
+    setForbidden(false);
     load(controller.signal)
       .then((answer) => {
         if (!controller.signal.aborted) {
-          setWork(answer);
+          setPlate(answer);
         }
       })
       .catch((failure: unknown) => {
-        if (!controller.signal.aborted) {
+        if (controller.signal.aborted) {
+          return;
+        }
+        if (
+          refused !== undefined &&
+          failure instanceof ApiError &&
+          failure.code === "auth.forbidden"
+        ) {
+          setForbidden(true);
+        } else {
           setProblem(errorWords(failure, couldNotLoad));
         }
       });
     return () => controller.abort();
-  }, [load, couldNotLoad]);
+  }, [load, couldNotLoad, refused]);
   return (
     <>
       <div className="sc-page-head">
-        <h1 className="sc-page-title">{words.work.title}</h1>
+        <h1 className="sc-page-title">{props.title}</h1>
+        {props.aside}
       </div>
-      <p className="sc-lead">{words.work.lead}</p>
       {problem !== undefined && <Callout tone="danger">{problem}</Callout>}
-      {work === undefined ? (
+      {forbidden && refused !== undefined ? (
+        <EmptyState
+          title={refused.title}
+          body={refused.body}
+          action={<LinkButton href={PATHS.work}>{words.nav.work}</LinkButton>}
+        />
+      ) : plate === undefined ? (
         problem === undefined && (
           <div className="sc-loading">
-            <Spinner label={words.work.loading} />
+            <Spinner label={props.loading} />
           </div>
         )
-      ) : work.tasks.length === 0 && work.decisions.length === 0 ? (
-        <EmptyState title={words.work.empty.title} body={words.work.empty.body} />
+      ) : plate.tasks.length === 0 && (plate.decisions?.length ?? 0) === 0 ? (
+        <EmptyState title={props.empty.title} body={props.empty.body} />
       ) : (
         <components.WorkList
-          work={work}
+          work={plate}
+          week={props.week}
           taskHref={(projectKey, task) => taskHref(projectKey, task.number)}
           decisionHref={(projectKey, decisionId) => decisionHref(projectKey, decisionId)}
+          weekHref={props.weekHref}
         />
       )}
     </>
   );
 }
 
+/** What is on the person's own plate, across their projects. */
+function WorkPage(props: {
+  readonly data: ConsoleData;
+  readonly components: ConsoleComponents;
+  readonly week: string | undefined;
+}) {
+  const words = useWords();
+  const { work } = props.data.actions;
+  return (
+    <PlatePage
+      components={props.components}
+      load={work}
+      title={words.work.title}
+      week={props.week}
+      weekHref={workHref}
+      loading={words.work.loading}
+      couldNotLoad={words.work.couldNotLoad}
+      empty={words.work.empty}
+    />
+  );
+}
+
+/** Another person's plate, for whoever oversees them: an administrator, or an owner of a project they are in. */
+function PersonWorkPage(props: {
+  readonly id: string;
+  readonly data: ConsoleData;
+  readonly components: ConsoleComponents;
+  readonly week: string | undefined;
+}) {
+  const words = useWords();
+  const { id, data } = props;
+  const person = data.people.find((candidate) => candidate.id === id);
+  const name = person === undefined ? "?" : personName(person);
+  const { personWork } = data.actions;
+  const load = useCallback((signal: AbortSignal) => personWork(id, signal), [personWork, id]);
+  return (
+    <PlatePage
+      components={props.components}
+      load={load}
+      title={words.people.workOf(name)}
+      aside={<LinkButton href={PATHS.people}>{words.nav.people}</LinkButton>}
+      week={props.week}
+      weekHref={(day) => personWorkHref(id, day)}
+      loading={words.people.loadingWork}
+      couldNotLoad={words.people.couldNotLoadWork}
+      empty={{ title: words.people.noWork.title(name), body: words.people.noWork.body }}
+      refused={words.people.notOverseen}
+    />
+  );
+}
+
 function WorkspacePage(props: {
   readonly route: Route;
   readonly data: ConsoleData;
@@ -1168,7 +1595,13 @@ function WorkspacePage(props: {
   const { busy, error, act } = useAction();
 
   if (route.name === "work") {
-    return <WorkPage data={data} components={components} />;
+    return <WorkPage data={data} components={components} week={route.week} />;
+  }
+  if (route.name === "person-work") {
+    return <PersonWorkPage id={route.id} data={data} components={components} week={route.week} />;
+  }
+  if (route.name === "workspace-settings") {
+    return <WorkspaceSettingsPage form={route.form} data={data} navigation={navigation} />;
   }
   if (route.name === "categories") {
     const me = data.me?.person ?? undefined;
@@ -1179,9 +1612,6 @@ function WorkspacePage(props: {
         <div className="sc-page-head">
           <h1 className="sc-page-title">{categories.title}</h1>
         </div>
-        <p className="sc-lead">
-          {categories.lead} {categories.onlyAdmin}
-        </p>
         {error !== undefined && <Callout tone="danger">{error}</Callout>}
         <components.CategoryList
           categories={data.categories}
@@ -1204,23 +1634,46 @@ function WorkspacePage(props: {
           }
           empty={<EmptyState title={categories.empty.title} body={categories.empty.body} />}
         />
-        {administrator && <p className="sc-muted">{categories.inUse}</p>}
       </>
     );
   }
 
-  if (route.name === "people") {
+  if (route.name === "people" || route.name === "new-listing") {
     const me = data.me?.person ?? undefined;
     const administrator = me?.role === "admin";
+    const making = route.name === "new-listing" && administrator;
+    // An owner sees the work of the people in their projects; the console refuses the rest.
+    const oversees = administrator || data.projects.some((project) => project.role === "owner");
     return (
       <>
         <div className="sc-page-head">
           <h1 className="sc-page-title">{words.people.title}</h1>
+          {administrator && !making && (
+            <LinkButton href={PATHS.newListing} variant="primary">
+              {words.people.letIn}
+            </LinkButton>
+          )}
         </div>
-        <p className="sc-lead">{words.people.lead}</p>
         {error !== undefined && <Callout tone="danger">{error}</Callout>}
+        {making && (
+          <section className="sc-panel sc-panel-form" aria-label={words.people.letInAria}>
+            <ListingForm
+              providers={data.me?.signIn ?? []}
+              busy={busy}
+              onSubmit={(input) =>
+                void act(async () => {
+                  await data.actions.createListing(input);
+                  navigation.replace(PATHS.people);
+                })
+              }
+              onCancel={() => navigation.back(PATHS.people)}
+            />
+          </section>
+        )}
         <components.PeopleList
           people={data.people}
+          listed={data.listed}
+          organization={data.organization}
           me={me}
           busy={busy}
           onChangeRole={
@@ -1228,6 +1681,17 @@ function WorkspacePage(props: {
               ? (person, role) => void act(() => data.actions.updatePerson(person.id, { role }))
               : undefined
           }
+          onChangeStatus={
+            administrator
+              ? (person, status) => void act(() => data.actions.updatePerson(person.id, { status }))
+              : undefined
+          }
+          onUnlist={
+            administrator
+              ? (listing) => void act(() => data.actions.removeListing(listing.id))
+              : undefined
+          }
+          workHref={oversees ? (person) => personWorkHref(person.id) : undefined}
           agentsHref={administrator ? (person) => personAgentsHref(person.id) : undefined}
         />
       </>
@@ -1253,7 +1717,6 @@ function WorkspacePage(props: {
             </LinkButton>
           )}
         </div>
-        <p className="sc-lead">{agents.lead}</p>
         {error !== undefined && <Callout tone="danger">{error}</Callout>}
         {fresh !== undefined && (
           <NewToken token={fresh.token} secret={fresh.secret} onDone={() => setFresh(undefined)} />
@@ -1376,7 +1839,10 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
         {
           href: PATHS.people,
           label: words.nav.people,
-          current: route.name === "people" || route.name === "person-agents",
+          current:
+            route.name === "people" ||
+            route.name === "new-listing" ||
+            route.name === "person-agents",
         },
         ...(viaToken
           ? []
@@ -1387,11 +1853,12 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
                 current: route.name === "agents" || route.name === "new-token",
               },
             ]),
-        // The categories are read by everyone, for what the colours mean, and kept by an administrator.
+        // The settings are read by everyone: the rules every agent follows, the categories and
+        // what the colours mean, where the skills come from; kept by an administrator.
         {
-          href: PATHS.categories,
-          label: words.nav.categories,
-          current: route.name === "categories",
+          href: PATHS.settings,
+          label: words.nav.settings,
+          current: route.name === "workspace-settings" || route.name === "categories",
         },
         ...pages
           .filter((candidate) => candidate.level === "workspace")
@@ -1454,15 +1921,12 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
                 label: words.nav.members,
                 current: route.name === "members",
               },
-              ...(project?.role === "owner"
-                ? [
-                    {
-                      href: projectHref(projectKey, "settings"),
-                      label: words.nav.settings,
-                      current: route.name === "settings",
-                    },
-                  ]
-                : []),
+              // Read by every member: what the project is, and what its agents are asked (ADR-0023).
+              {
+                href: projectHref(projectKey, "settings"),
+                label: words.nav.settings,
+                current: route.name === "settings",
+              },
               ...pages
                 .filter((candidate) => candidate.level === "project")
                 .map((candidate) => ({