@skillcdn/console 0.1.17 → 0.1.19

package/src/components/task-view.tsx

@@ -16,13 +16,22 @@ import type {
 import { formatDay } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
 import type { TaskFormKind } from "../router.js";
-import { TASK_STATES } from "../vocabulary.js";
+import { OPEN_TASK_STATES, TASK_STATES } from "../vocabulary.js";
 import { type CommentDraft, TaskThread } from "./comments.js";
 import { DecisionForm } from "./decision-form.js";
 import { EventFeed } from "./event-feed.js";
 import { Markdown } from "./markdown.js";
 import { TaskForm } from "./task-form.js";
-import { CategoryBadge, DueBadge, PersonChip, PriorityBadge, StateBadge, Time } from "./ui.js";
+import {
+  Badge,
+  Button,
+  CategoryBadge,
+  DueBadge,
+  PersonChip,
+  PriorityBadge,
+  StateBadge,
+  Time,
+} from "./ui.js";
 
 // One task: what it is, who it is on, what it links to, the discussion on it, which is what was
 // said about it with the agents at work on it and the decisions about it in the order they
@@ -76,6 +85,9 @@ export interface TaskViewProps {
     | ((decision: RestDecision, patch: RestDecisionPatch) => void)
     | undefined;
   readonly onAbandonRun?: ((run: RestRun) => void) | undefined;
+  /** Called to put a done or dropped task away, and to bring one back (ADR-0029); left out, neither is offered. */
+  readonly onArchive?: ((task: RestTask) => void) | undefined;
+  readonly onRestore?: ((task: RestTask) => void) | undefined;
   /** Called with a word for the discussion, and the files put in it. Left out, nothing can be said here. */
   readonly onComment?: ((draft: CommentDraft) => void) | undefined;
 }
@@ -135,6 +147,7 @@ export function TaskView(props: TaskViewProps) {
         </h1>
         <div className="sc-task-badges">
           <StateBadge state={task.state} />
+          {task.archivedAt !== null && <Badge tone="neutral">{words.task.archived}</Badge>}
           {task.category !== null && <CategoryBadge category={task.category} />}
           <PriorityBadge priority={task.priority} />
           {task.dueOn !== null && (
@@ -312,6 +325,14 @@ export function TaskView(props: TaskViewProps) {
                 </dd>
               </div>
             )}
+            {task.archivedAt !== null && (
+              <div>
+                <dt>{words.task.archivedAt}</dt>
+                <dd>
+                  <Time iso={task.archivedAt} />
+                </dd>
+              </div>
+            )}
             <div>
               <dt>{words.task.written}</dt>
               <dd>
@@ -333,6 +354,26 @@ export function TaskView(props: TaskViewProps) {
               <a className="sc-button sc-button-secondary" href={props.formHref("ask")}>
                 {words.task.raiseDecision}
               </a>
+              {props.onArchive !== undefined &&
+                task.archivedAt === null &&
+                !OPEN_TASK_STATES.includes(task.state) && (
+                  <Button
+                    variant="secondary"
+                    disabled={props.busy === true}
+                    onClick={() => props.onArchive?.(task)}
+                  >
+                    {words.task.archive}
+                  </Button>
+                )}
+              {props.onRestore !== undefined && task.archivedAt !== null && (
+                <Button
+                  variant="secondary"
+                  disabled={props.busy === true}
+                  onClick={() => props.onRestore?.(task)}
+                >
+                  {words.task.restore}
+                </Button>
+              )}
             </div>
           )}
         </aside>

package/src/components/tokens.tsx

@@ -1,12 +1,15 @@
 import { type FormEvent, type ReactNode, useState } from "react";
 import {
+  type ClientVerdict,
   DEFAULT_TOKEN_DAYS,
+  judgeClient,
   MAX_TOKEN_NAME_LENGTH,
+  parseVersion,
   type RestToken,
   type RestTokenInput,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Button, Callout, CopyButton, Time } from "./ui.js";
+import { Badge, Button, Callout, CopyButton, Time } from "./ui.js";
 
 // The tokens a person holds for their agents, scripts and consoles of their own, shown as the
 // agents that hold them: the list, the way to make one by hand, and the one just made, whose
@@ -36,6 +39,22 @@ export interface TokenListProps {
   readonly onRevoke?: ((token: RestToken) => void) | undefined;
   readonly busy?: boolean | undefined;
   readonly empty?: ReactNode;
+  /** The console's version (ADR-0025), so that the version of the command an agent runs is said to be behind or ahead; left out, the version alone is shown. */
+  readonly consoleVersion?: string | undefined;
+}
+
+/** What a command's version is to the console's: nothing to say when they go together, else which way they differ. */
+function verdictOf(
+  client: string,
+  consoleVersion: string | undefined,
+): Exclude<ClientVerdict, "current"> | undefined {
+  const command = parseVersion(client);
+  const server = parseVersion(consoleVersion);
+  if (command === undefined || server === undefined) {
+    return undefined;
+  }
+  const { verdict } = judgeClient(command, server);
+  return verdict === "current" ? undefined : verdict;
 }
 
 export function TokenList(props: TokenListProps) {
@@ -53,6 +72,24 @@ export function TokenList(props: TokenListProps) {
               <span>
                 {words.connected} <Time iso={token.createdAt} />
               </span>
+              {token.client !== null && (
+                <span>
+                  {words.command(token.client)}
+                  {((verdict) =>
+                    verdict === undefined ? null : (
+                      <>
+                        {" "}
+                        <Badge
+                          tone={
+                            verdict === "outdated" || verdict === "too_new" ? "danger" : "warning"
+                          }
+                        >
+                          {words.commandVerdict[verdict]}
+                        </Badge>
+                      </>
+                    ))(verdictOf(token.client, props.consoleVersion))}
+                </span>
+              )}
               <span>
                 {token.expiresAt === null ? (
                   words.doesNotExpire

package/src/console.tsx

@@ -43,16 +43,19 @@ import { ConnectWords } from "./components/connect.js";
 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 { GoalForm, GoalList, type GoalListProps, GoalView, goalMonth } from "./components/goals.js";
+import { PAGE_SIZE } from "./components/paged.js";
 import { ListingForm, PeopleList, type PeopleListProps } from "./components/people.js";
 import {
   MemberList,
   type MemberListProps,
+  PackTokenForm,
   ProjectForm,
   ProjectList,
   type ProjectListProps,
   ProjectMark,
 } from "./components/projects.js";
+import { GoalTimeline } from "./components/roadmap.js";
 import { RulesForm, RulesView } from "./components/rules.js";
 import {
   type Brand,
@@ -74,6 +77,8 @@ import {
   EmptyState,
   personName,
   Spinner,
+  StateBadge,
+  Time,
 } from "./components/ui.js";
 import { WorkList, type WorkListProps } from "./components/work.js";
 import { ConnectPage } from "./connect-page.js";
@@ -94,6 +99,7 @@ import {
   customPageHref,
   decisionHref,
   docHref,
+  type GoalTaskView,
   goalHref,
   matchRoute,
   type Navigation,
@@ -106,6 +112,7 @@ import {
   projectHref,
   projectSettingsHref,
   type Route,
+  roadmapHref,
   settingsHref,
   signInFailureOf,
   taskHref,
@@ -440,6 +447,102 @@ function ProjectsPage(props: {
   );
 }
 
+/**
+ * The archive of the board (ADR-0029): the tasks put away, newest first, a page at a time from
+ * the server, each brought back from here by whoever may work in the project.
+ */
+function ArchivePage(props: { readonly project: RestProject; readonly data: ConsoleData }) {
+  const words = useWords();
+  const { project, data } = props;
+  const key = project.key;
+  const { busy, error, act } = useAction();
+  const [items, setItems] = useState<readonly RestTask[]>([]);
+  const [more, setMore] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const { archivedTasks } = data.actions;
+  const feedLength = data.events.length;
+  // The first page, read again whenever the project's feed grows: something was put away or brought back.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the feed's length is what triggers the read
+  useEffect(() => {
+    const controller = new AbortController();
+    archivedTasks({ limit: PAGE_SIZE, offset: 0 }, controller.signal)
+      .then((page) => {
+        if (!controller.signal.aborted) {
+          setItems(page.items);
+          setMore(page.more);
+          setLoaded(true);
+        }
+      })
+      .catch(() => undefined);
+    return () => controller.abort();
+  }, [archivedTasks, feedLength]);
+  const onMore = () =>
+    void archivedTasks({ limit: PAGE_SIZE, offset: items.length })
+      .then((page) => {
+        setItems((current) => [...current, ...page.items]);
+        setMore(page.more);
+      })
+      .catch(() => undefined);
+  const archive = words.archive;
+  return (
+    <>
+      <div className="sc-page-head">
+        <h1 className="sc-page-title">{archive.title}</h1>
+        <LinkButton href={projectHref(key)}>{words.nav.board}</LinkButton>
+      </div>
+      <p className="sc-lead">{archive.lead}</p>
+      {error !== undefined && <Callout tone="danger">{error}</Callout>}
+      {!loaded ? (
+        <Spinner label={archive.loading} />
+      ) : items.length === 0 ? (
+        <EmptyState title={archive.empty.title} body={archive.empty.body} />
+      ) : (
+        <>
+          <ul className="sc-task-rows" aria-label={archive.title}>
+            {items.map((task) => (
+              <li key={task.id} className="sc-task-row">
+                <a className="sc-task-row-title" href={taskHref(key, task.number)}>
+                  <span className="sc-card-number">#{task.number}</span> {task.title}
+                </a>
+                <span className="sc-task-row-meta">
+                  <StateBadge state={task.state} />
+                  {task.archivedAt !== null && (
+                    <span className="sc-muted">
+                      {archive.since} <Time iso={task.archivedAt} />
+                    </span>
+                  )}
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    disabled={busy}
+                    onClick={() =>
+                      void act(async () => {
+                        await data.actions.restoreTask(task.id);
+                        setItems((current) =>
+                          current.filter((candidate) => candidate.id !== task.id),
+                        );
+                      })
+                    }
+                  >
+                    {archive.restore}
+                  </Button>
+                </span>
+              </li>
+            ))}
+          </ul>
+          {more && (
+            <div className="sc-show-more">
+              <Button variant="secondary" size="sm" onClick={onMore}>
+                {archive.more}
+              </Button>
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+}
+
 function TaskPage(props: {
   readonly route: Extract<Route, { name: "task" }>;
   readonly project: RestProject;
@@ -453,10 +556,43 @@ function TaskPage(props: {
   const words = useWords();
   const { route, project, data, components, navigation, busy, error, act } = props;
   const key = project.key;
-  const task =
+  const current =
     route.number === undefined
       ? data.tasks.find((candidate) => candidate.id === route.id)
       : data.tasks.find((candidate) => candidate.number === route.number);
+  // A task put away is not among the board's (ADR-0029): it is asked for by itself.
+  const [fetched, setFetched] = useState<RestTask | undefined>(undefined);
+  const [missing, setMissing] = useState<string | undefined>(undefined);
+  const { fetchTask } = data.actions;
+  const wanted =
+    current === undefined && data.projectLoaded
+      ? route.number === undefined
+        ? route.id
+        : String(route.number)
+      : undefined;
+  useEffect(() => {
+    if (wanted === undefined) {
+      return;
+    }
+    const controller = new AbortController();
+    fetchTask(wanted, controller.signal)
+      .then((found) => {
+        if (!controller.signal.aborted) {
+          setFetched(found);
+        }
+      })
+      .catch(() => {
+        if (!controller.signal.aborted) {
+          setMissing(wanted);
+        }
+      });
+    return () => controller.abort();
+  }, [wanted, fetchTask]);
+  const task =
+    current ??
+    (fetched !== undefined && (fetched.id === route.id || fetched.number === route.number)
+      ? fetched
+      : undefined);
   const [history, setHistory] = useState<readonly RestEvent[] | undefined>(undefined);
   const [comments, setComments] = useState<readonly RestComment[] | undefined>(undefined);
   const { taskHistory, taskComments } = data.actions;
@@ -493,6 +629,9 @@ function TaskPage(props: {
     return () => controller.abort();
   }, [taskId, taskHistory, taskComments, feedLength]);
   if (task === undefined) {
+    if (wanted !== undefined && missing !== wanted) {
+      return <Spinner label={words.common.loading} />;
+    }
     return (
       <EmptyState
         title={words.task.noSuch.title}
@@ -543,6 +682,17 @@ function TaskPage(props: {
         void act(() => data.actions.updateDecision(decision.id, patch))
       }
       onAbandonRun={(run) => void act(() => data.actions.abandonRun(run.id))}
+      onArchive={(target) =>
+        void act(async () => {
+          await data.actions.archiveTask(target.id);
+          navigation.go(projectHref(key, "archive"));
+        })
+      }
+      onRestore={(target) =>
+        void act(async () => {
+          setFetched(await data.actions.restoreTask(target.id));
+        })
+      }
       onComment={(draft) =>
         void act(async () => {
           await data.actions.comment(task.id, {
@@ -613,6 +763,7 @@ function ProjectPage(props: {
           taskHref={href}
           onOpen={(task) => navigation.go(href(task))}
           onMove={onMove}
+          archiveHref={projectHref(key, "archive")}
           empty={
             data.tasks.length === 0 ? (
               <EmptyState
@@ -702,6 +853,7 @@ function ProjectPage(props: {
           categories={data.categories}
           goals={data.goals}
           taskHref={href}
+          goalHref={(goal) => goalHref(key, goal.id)}
           monthHref={(wanted) => calendarHref(key, wanted, route.filter)}
         />
         <div className="sc-calendar-below">
@@ -765,6 +917,7 @@ function ProjectPage(props: {
         {making && (
           <section className="sc-panel sc-panel-form" aria-label={roadmap.setGoalAria}>
             <GoalForm
+              categories={data.categories}
               busy={busy}
               onSubmit={(input) =>
                 void act(async () => {
@@ -776,6 +929,18 @@ function ProjectPage(props: {
             />
           </section>
         )}
+        {data.goals.length > 0 && (
+          <GoalTimeline
+            goals={data.goals}
+            from={
+              route.name === "roadmap" && route.from !== undefined ? route.from : monthOf(today())
+            }
+            today={today()}
+            categories={data.categories}
+            goalHref={(goal) => goalHref(key, goal.id)}
+            fromHref={(month) => roadmapHref(key, month)}
+          />
+        )}
         <components.GoalList
           goals={data.goals}
           goalHref={(goal) => goalHref(key, goal.id)}
@@ -820,6 +985,7 @@ function ProjectPage(props: {
           <section className="sc-panel sc-panel-form" aria-label={roadmap.editAria}>
             <GoalForm
               goal={goal}
+              categories={data.categories}
               busy={busy}
               onSubmit={(input) =>
                 void act(async () => {
@@ -833,6 +999,10 @@ function ProjectPage(props: {
         </>
       );
     }
+    const now = today();
+    const towards = data.tasks.filter((task) => task.goalId === goal.id);
+    const month = route.month ?? goalMonth(goal, now);
+    const viewHref = (view: GoalTaskView) => goalHref(key, goal.id, { view });
     return (
       <>
         <div className="sc-page-head">
@@ -845,13 +1015,60 @@ function ProjectPage(props: {
           tasks={data.tasks}
           taskHref={href}
           docHref={toDoc}
-          editHref={owner ? goalHref(key, goal.id, "edit") : undefined}
+          today={now}
+          editHref={owner ? goalHref(key, goal.id, { form: "edit" }) : undefined}
           onMove={
             owner
-              ? (target, state) => void act(() => data.actions.updateGoal(target.id, { state }))
+              ? (target, state) =>
+                  void act(async () => {
+                    await data.actions.updateGoal(target.id, { state });
+                    // A goal closed takes its done and dropped tasks to the archive, if the person says so (ADR-0029).
+                    const closed = towards.filter(
+                      (task) => !OPEN_TASK_STATES.includes(task.state),
+                    ).length;
+                    if (
+                      (state === "done" || state === "dropped") &&
+                      closed > 0 &&
+                      window.confirm(roadmap.archiveAsk(closed))
+                    ) {
+                      await data.actions.archiveGoalTasks(target.id);
+                    }
+                  })
+              : undefined
+          }
+          onArchiveTasks={
+            owner && towards.some((task) => !OPEN_TASK_STATES.includes(task.state))
+              ? () => void act(() => data.actions.archiveGoalTasks(goal.id))
               : undefined
           }
           busy={busy}
+          view={route.view}
+          viewHref={viewHref}
+          board={
+            <components.Board
+              tasks={towards}
+              taskHref={href}
+              onOpen={(task) => navigation.go(href(task))}
+              onMove={onMove}
+              today={now}
+              archiveHref={projectHref(key, "archive")}
+              empty={
+                towards.length === 0 ? <p className="sc-muted">{roadmap.noTasks}</p> : undefined
+              }
+            />
+          }
+          calendar={
+            <components.Calendar
+              tasks={towards}
+              month={month}
+              today={now}
+              categories={data.categories}
+              goals={[goal]}
+              taskHref={href}
+              goalHref={(target) => goalHref(key, target.id)}
+              monthHref={(wanted) => goalHref(key, goal.id, { view: "calendar", month: wanted })}
+            />
+          }
         />
       </>
     );
@@ -941,6 +1158,9 @@ function ProjectPage(props: {
       </>
     );
   }
+  if (route.name === "archive") {
+    return <ArchivePage project={project} data={data} />;
+  }
   if (route.name === "feed") {
     return (
       <>
@@ -1139,6 +1359,39 @@ function ProjectSettingsPage(props: {
       </>
     );
   }
+  if (route.form === "pack-token") {
+    if (!owner) {
+      return <NothingHere />;
+    }
+    return (
+      <>
+        {head}
+        {error !== undefined && <Callout tone="danger">{error}</Callout>}
+        <section className="sc-panel sc-panel-form" aria-label={words.projects.packToken.aria}>
+          <PackTokenForm
+            set={project.packToken !== null}
+            busy={busy}
+            onSubmit={(token) =>
+              void act(async () => {
+                await data.actions.setPackToken(token);
+                navigation.replace(here);
+              })
+            }
+            onRemove={
+              project.packToken === null
+                ? undefined
+                : () =>
+                    void act(async () => {
+                      await data.actions.removePackToken();
+                      navigation.replace(here);
+                    })
+            }
+            onCancel={() => navigation.back(here)}
+          />
+        </section>
+      </>
+    );
+  }
   return (
     <>
       {head}
@@ -1174,6 +1427,24 @@ function ProjectSettingsPage(props: {
               )}
             </dd>
           </div>
+          <div>
+            <dt>{settings.packToken}</dt>
+            <dd>
+              {project.packToken === null ? (
+                <span className="sc-muted">{settings.packTokenNone}</span>
+              ) : (
+                <>
+                  {settings.packTokenSet} <Time iso={project.packToken.setAt} />
+                </>
+              )}
+              {owner && (
+                <>
+                  {" "}
+                  <a href={projectSettingsHref(key, "pack-token")}>{settings.packTokenEdit}</a>
+                </>
+              )}
+            </dd>
+          </div>
           <div>
             <dt>{form.symbol}</dt>
             <dd>
@@ -1451,6 +1722,7 @@ function PersonAgentsPage(props: {
         <components.TokenList
           tokens={tokens}
           busy={busy}
+          consoleVersion={data.me?.console?.version}
           onRevoke={(token) =>
             void act(async () => {
               await data.actions.revokePersonToken(id, token.id);
@@ -1763,6 +2035,7 @@ function WorkspacePage(props: {
         <components.TokenList
           tokens={data.tokens}
           busy={busy}
+          consoleVersion={data.me?.console?.version}
           onRevoke={(token) => void act(() => data.actions.revokeToken(token.id))}
           empty={<EmptyState title={agents.empty.title} body={agents.empty.body} />}
         />
@@ -2054,6 +2327,7 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
           wide={
             route.name === "board" ||
             route.name === "calendar" ||
+            (route.name === "goal" && route.form === undefined) ||
             (route.name === "custom" &&
               pages.some((candidate) => candidate.key === route.page && candidate.wide === true))
           }