@skillcdn/console 0.1.16 → 0.1.18

package/src/components/roadmap.tsx

@@ -0,0 +1,242 @@
+import type { RestCategory, RestGoal } from "../api.js";
+import { addMonths, daysBetween, formatMonth, monthOf, today as todayOf } from "../dates.js";
+import { useLanguage, useWords } from "../i18n/index.js";
+import { cx, GoalStateBadge } from "./ui.js";
+
+// The roadmap as months (ADR-0026): the months as columns, and each goal planned in days a bar
+// from its start to its target in the colour of its category, filled as far as its tasks are
+// done, with today a line down the months. A goal with one day alone sits on it as a point; one
+// with no day is named below the months, since a plan without days is on none of them. Takes
+// its data as props and nothing from the network; the months shown are the address's (ADR-0010).
+
+/** How many months the roadmap shows at once when the address names no other span. */
+export const DEFAULT_TIMELINE_MONTHS = 6;
+
+export interface TimelineBar {
+  readonly goal: RestGoal;
+  /** Where the bar begins and ends, as shares of the whole span, 0 to 1. */
+  readonly from: number;
+  readonly to: number;
+  /** Whether the goal begins within the span, and whether it ends within it. */
+  readonly begins: boolean;
+  readonly ends: boolean;
+  /** Whether the goal has one day only: a point on it, not a bar. */
+  readonly point: boolean;
+}
+
+/** The first day of a month, as a day. */
+const firstDayOf = (month: string): string => `${month}-01`;
+
+/**
+ * The bars of the goals that touch the span of `months` from `from` on, cut to it: from the
+ * goal's start, or the span's first day when it began before, to its target day whole, or the
+ * span's end when it ends after. A goal with a start or a target alone sits on that day; a goal
+ * with neither is left out.
+ */
+export function timelineBars(
+  goals: readonly RestGoal[],
+  from: string,
+  months: number,
+): TimelineBar[] {
+  const first = firstDayOf(from);
+  const end = firstDayOf(addMonths(from, months));
+  const total = daysBetween(first, end);
+  if (total <= 0) {
+    return [];
+  }
+  return goals.flatMap((goal) => {
+    const startsOn = goal.startsOn ?? goal.dueOn;
+    const dueOn = goal.dueOn ?? goal.startsOn;
+    if (startsOn === null || dueOn === null || dueOn < first || startsOn >= end) {
+      return [];
+    }
+    const begins = startsOn >= first;
+    const ends = dueOn < end;
+    const fromDay = begins ? daysBetween(first, startsOn) : 0;
+    const toDay = ends ? daysBetween(first, dueOn) + 1 : total;
+    return [
+      {
+        goal,
+        from: fromDay / total,
+        to: toDay / total,
+        begins,
+        ends,
+        point: startsOn === dueOn,
+      },
+    ];
+  });
+}
+
+export interface GoalTimelineProps {
+  readonly goals: readonly RestGoal[];
+  /** The first month shown: `2026-10`. */
+  readonly from: string;
+  /** How many months are shown; `DEFAULT_TIMELINE_MONTHS` when left out. */
+  readonly months?: number | undefined;
+  /** The day to count from; the browser's today when left out. */
+  readonly today?: string | undefined;
+  /** The workspace's categories, for the legend to say what the colours mean. */
+  readonly categories?: readonly RestCategory[] | undefined;
+  readonly goalHref: (goal: RestGoal) => string;
+  /** Where the roadmap is from another month on. */
+  readonly fromHref: (month: string) => string;
+}
+
+const percent = (share: number): string => `${(share * 100).toFixed(3)}%`;
+
+export function GoalTimeline(props: GoalTimelineProps) {
+  const words = useWords().roadmap;
+  const { tag } = useLanguage();
+  const months = Math.max(1, props.months ?? DEFAULT_TIMELINE_MONTHS);
+  const now = props.today ?? todayOf();
+  const first = firstDayOf(props.from);
+  const end = firstDayOf(addMonths(props.from, months));
+  const total = daysBetween(first, end);
+  const columns = Array.from({ length: months }, (_, index) => addMonths(props.from, index));
+  const shares = columns.map(
+    (month) => daysBetween(firstDayOf(month), firstDayOf(addMonths(month, 1))) / total,
+  );
+  const bars = timelineBars(props.goals, props.from, months);
+  const todayAt = now >= first && now < end ? daysBetween(first, now) / total : undefined;
+  const undated = props.goals.filter((goal) => goal.startsOn === null && goal.dueOn === null);
+  const doneShare = (goal: RestGoal): number => {
+    const counts = goal.taskCounts;
+    const all = counts.idea + counts.ready + counts.in_progress + counts.in_review + counts.done;
+    return all === 0 ? 0 : counts.done / all;
+  };
+  return (
+    <div className="sc-timeline">
+      <div className="sc-timeline-head">
+        <h2 className="sc-timeline-title">{words.timeline.title}</h2>
+        <nav className="sc-calendar-nav" aria-label={words.timeline.title}>
+          <a
+            className="sc-button sc-button-ghost sc-button-sm"
+            href={props.fromHref(addMonths(props.from, -1))}
+            aria-label={words.timeline.earlier}
+          >
+            {"<"}
+          </a>
+          <a className="sc-button sc-button-ghost sc-button-sm" href={props.fromHref(monthOf(now))}>
+            {words.timeline.thisMonth}
+          </a>
+          <a
+            className="sc-button sc-button-ghost sc-button-sm"
+            href={props.fromHref(addMonths(props.from, 1))}
+            aria-label={words.timeline.later}
+          >
+            {">"}
+          </a>
+        </nav>
+      </div>
+      <div className="sc-timeline-grid">
+        <div className="sc-timeline-row sc-timeline-months">
+          <div className="sc-timeline-label" aria-hidden="true" />
+          <div className="sc-timeline-track">
+            {columns.map((month, index) => (
+              <span
+                key={month}
+                className="sc-timeline-month"
+                style={{ width: percent(shares[index] ?? 0) }}
+              >
+                {formatMonth(month, tag)}
+              </span>
+            ))}
+            {todayAt !== undefined && (
+              <span
+                className="sc-timeline-today sc-timeline-today-mark"
+                style={{ left: percent(todayAt) }}
+                title={words.timeline.today}
+              />
+            )}
+          </div>
+        </div>
+        {bars.map(({ goal, from, to, begins, ends, point }) => {
+          const counts = goal.taskCounts;
+          const all =
+            counts.idea + counts.ready + counts.in_progress + counts.in_review + counts.done;
+          return (
+            <div key={goal.id} className={cx("sc-timeline-row", `sc-goal-${goal.state}`)}>
+              <div className="sc-timeline-label">
+                <a className="sc-timeline-goal" href={props.goalHref(goal)}>
+                  {goal.title}
+                </a>
+                <GoalStateBadge state={goal.state} />
+              </div>
+              <div className="sc-timeline-track">
+                {columns.map((month, index) => (
+                  <span
+                    key={month}
+                    className="sc-timeline-column"
+                    style={{ width: percent(shares[index] ?? 0) }}
+                    aria-hidden="true"
+                  />
+                ))}
+                {todayAt !== undefined && (
+                  <span
+                    className="sc-timeline-today"
+                    style={{ left: percent(todayAt) }}
+                    aria-hidden="true"
+                  />
+                )}
+                <a
+                  className={cx(
+                    point ? "sc-timeline-point" : "sc-timeline-bar",
+                    `sc-category-${goal.category?.color ?? "gray"}`,
+                    begins && "sc-timeline-bar-begins",
+                    ends && "sc-timeline-bar-ends",
+                  )}
+                  style={
+                    point
+                      ? { left: percent(from) }
+                      : { left: percent(from), width: percent(to - from) }
+                  }
+                  href={props.goalHref(goal)}
+                  aria-label={`${goal.title}: ${words.progress(counts.done, all)}`}
+                >
+                  {!point && (
+                    <>
+                      <span
+                        className="sc-timeline-fill"
+                        style={{ width: percent(doneShare(goal)) }}
+                        aria-hidden="true"
+                      />
+                      <span className="sc-timeline-words">
+                        {counts.done}/{all}
+                      </span>
+                    </>
+                  )}
+                </a>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      {bars.length === 0 && <p className="sc-muted">{words.timeline.nothing}</p>}
+      {(props.categories ?? []).length > 0 && (
+        <dl className="sc-calendar-legend" aria-label={words.timeline.legend}>
+          {(props.categories ?? []).map((category) => (
+            <div key={category.key}>
+              <dt>
+                <span className={cx("sc-calendar-dot", `sc-category-${category.color}`)} />
+              </dt>
+              <dd>{category.name}</dd>
+            </div>
+          ))}
+        </dl>
+      )}
+      {undated.length > 0 && (
+        <p className="sc-timeline-undated">
+          <span className="sc-muted">{words.timeline.noDays}: </span>
+          {undated.map((goal, index) => (
+            <span key={goal.id}>
+              {index > 0 && ", "}
+              <a className="sc-timeline-goal" href={props.goalHref(goal)}>
+                {goal.title}
+              </a>
+            </span>
+          ))}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/task-view.tsx

@@ -1,7 +1,7 @@
 import type {
   RestAnswerInput,
-  RestArtifact,
   RestCategory,
+  RestComment,
   RestDecision,
   RestDecisionInput,
   RestDecisionPatch,
@@ -17,19 +17,20 @@ 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 { type CommentDraft, TaskThread } from "./comments.js";
 import { DecisionForm } from "./decision-form.js";
-import { DecisionCard } from "./decision-list.js";
 import { EventFeed } from "./event-feed.js";
 import { Markdown } from "./markdown.js";
-import { RunList } from "./runs.js";
 import { TaskForm } from "./task-form.js";
 import { CategoryBadge, DueBadge, PersonChip, PriorityBadge, StateBadge, Time } from "./ui.js";
 
-// One task: what it is, who it is on, what it links to, the agents at work on it, the decisions
-// about it, the tasks that are part of it, everything that happened to it, and the ways to
-// change it. Takes its data as props and nothing from the network; which of its forms is open
-// is told by the page, since each form has an address of its own (ADR-0010). The facts beside
-// the text say only what is set: a plan, a category or a goal the task has none of is not a row.
+// 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
+// came (ADR-0024), the tasks that are part of it, everything that happened to it, and the ways
+// to change it. Takes its data as props and nothing from the network; which of its forms is
+// open is told by the page, since each form has an address of its own (ADR-0010). The facts
+// beside the text say only what is set: a plan, a category or a goal the task has none of is
+// not a row.
 
 export interface TaskViewProps {
   readonly task: RestTask;
@@ -39,6 +40,8 @@ export interface TaskViewProps {
   readonly decisions: readonly RestDecision[];
   /** The runs of the board, or of this task; the ones on this task are shown. */
   readonly runs?: readonly RestRun[] | undefined;
+  /** The comments on the task, oldest first, when the page has read them. */
+  readonly comments?: readonly RestComment[] | undefined;
   /** Everything that happened to the task, oldest first, when the page has read it. */
   readonly history?: readonly RestEvent[] | undefined;
   /** The categories of the workspace, for the form. */
@@ -50,8 +53,8 @@ export interface TaskViewProps {
   readonly decisionHref?: ((decisionId: string) => string) | undefined;
   /** Where a goal of the roadmap is read. */
   readonly goalHref?: ((goalId: string) => string) | undefined;
-  /** Where a file a run handed in is read. */
-  readonly fileHref?: ((artifact: RestArtifact) => string) | undefined;
+  /** Where a file of the project is read, by its id: one a run handed in, or one put in a comment. */
+  readonly fileHref?: ((fileId: string) => string) | undefined;
   /** Where a document of the project is read, by its path, for the links in what was written. */
   readonly docHref?: ((path: string) => string) | undefined;
   /** The day to count due days from; the browser's today when left out. */
@@ -73,6 +76,8 @@ export interface TaskViewProps {
     | ((decision: RestDecision, patch: RestDecisionPatch) => void)
     | undefined;
   readonly onAbandonRun?: ((run: RestRun) => 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;
 }
 
 export function TaskView(props: TaskViewProps) {
@@ -86,7 +91,7 @@ export function TaskView(props: TaskViewProps) {
   const subtasks = props.tasks.filter((candidate) => candidate.parentId === task.id);
   const about = props.decisions.filter((decision) => decision.taskId === task.id);
   const runs = (props.runs ?? []).filter((run) => run.taskId === task.id);
-  const tasksById = new Map(props.tasks.map((candidate) => [candidate.id, candidate]));
+  const comments = (props.comments ?? []).filter((comment) => comment.taskId === task.id);
   const goal =
     task.goalId === null
       ? undefined
@@ -175,35 +180,29 @@ export function TaskView(props: TaskViewProps) {
               />
             </section>
           )}
-          {runs.length > 0 && (
-            <section className="sc-task-section" aria-label={words.task.runs}>
-              <h2 className="sc-section-title">{words.task.runs}</h2>
-              <RunList
+          {(runs.length > 0 ||
+            about.length > 0 ||
+            comments.length > 0 ||
+            props.onComment !== undefined) && (
+            <section className="sc-task-section" aria-label={words.comments.title}>
+              <h2 className="sc-section-title">{words.comments.title}</h2>
+              <TaskThread
+                task={task}
+                comments={comments}
                 runs={runs}
-                decisionHref={props.decisionHref}
+                decisions={about}
                 fileHref={props.fileHref}
+                decisionHref={props.decisionHref}
                 docHref={props.docHref}
-                onAbandon={props.onAbandonRun}
+                onAnswer={props.onAnswer}
+                onUpdateDecision={props.onUpdateDecision}
+                onAbandonRun={props.onAbandonRun}
+                onComment={props.onComment}
                 busy={props.busy}
+                empty={<p className="sc-muted">{words.comments.empty}</p>}
               />
             </section>
           )}
-          {about.length > 0 && (
-            <section className="sc-task-section" aria-label={words.task.decisions}>
-              <h2 className="sc-section-title">{words.task.decisions}</h2>
-              {about.map((decision) => (
-                <DecisionCard
-                  key={decision.id}
-                  decision={decision}
-                  task={decision.taskId === null ? undefined : tasksById.get(decision.taskId)}
-                  docHref={props.docHref}
-                  onAnswer={props.onAnswer}
-                  onUpdate={props.onUpdateDecision}
-                  busy={props.busy}
-                />
-              ))}
-            </section>
-          )}
           {props.history !== undefined && props.history.length > 0 && (
             <section className="sc-task-section" aria-label={words.task.history}>
               <h2 className="sc-section-title">{words.task.history}</h2>

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

@@ -17,6 +17,7 @@ import {
   PROJECT_RULES_TEMPLATE,
   REFERENCE_RULES,
   type RestAnswerInput,
+  type RestComment,
   type RestDecision,
   type RestDecisionInput,
   type RestDecisionPatch,
@@ -52,6 +53,7 @@ import {
   type ProjectListProps,
   ProjectMark,
 } from "./components/projects.js";
+import { GoalTimeline } from "./components/roadmap.js";
 import { RulesForm, RulesView } from "./components/rules.js";
 import {
   type Brand,
@@ -105,6 +107,7 @@ import {
   projectHref,
   projectSettingsHref,
   type Route,
+  roadmapHref,
   settingsHref,
   signInFailureOf,
   taskHref,
@@ -457,7 +460,8 @@ function TaskPage(props: {
       ? data.tasks.find((candidate) => candidate.id === route.id)
       : data.tasks.find((candidate) => candidate.number === route.number);
   const [history, setHistory] = useState<readonly RestEvent[] | undefined>(undefined);
-  const { taskHistory } = data.actions;
+  const [comments, setComments] = useState<readonly RestComment[] | undefined>(undefined);
+  const { taskHistory, taskComments } = data.actions;
   const taskId = task?.id;
   const number = task?.number;
   // A task named by its id is shown at its number's address.
@@ -481,8 +485,15 @@ function TaskPage(props: {
         }
       })
       .catch(() => undefined);
+    taskComments(taskId, controller.signal)
+      .then((items) => {
+        if (!controller.signal.aborted) {
+          setComments(items);
+        }
+      })
+      .catch(() => undefined);
     return () => controller.abort();
-  }, [taskId, taskHistory, feedLength]);
+  }, [taskId, taskHistory, taskComments, feedLength]);
   if (task === undefined) {
     return (
       <EmptyState
@@ -500,13 +511,14 @@ function TaskPage(props: {
       tasks={data.tasks}
       decisions={data.decisions}
       runs={data.runs}
+      comments={comments}
       history={history}
       categories={data.categories}
       goals={data.goals}
       taskHref={(candidate) => taskHref(key, candidate.number)}
       decisionHref={(decisionId) => decisionHref(key, decisionId)}
       goalHref={(goalId) => goalHref(key, goalId)}
-      fileHref={(artifact) => projectPath(key, "files", artifact.id)}
+      fileHref={(fileId) => projectPath(key, "files", fileId)}
       docHref={(path) => docHref(key, path)}
       form={route.form}
       formHref={(form) => taskHref(key, task.number, form)}
@@ -533,6 +545,19 @@ function TaskPage(props: {
         void act(() => data.actions.updateDecision(decision.id, patch))
       }
       onAbandonRun={(run) => void act(() => data.actions.abandonRun(run.id))}
+      onComment={(draft) =>
+        void act(async () => {
+          await data.actions.comment(task.id, {
+            body: draft.body,
+            files: draft.files.map((file) => ({
+              name: file.name,
+              bytes: file,
+              ...(file.type === "" ? {} : { contentType: file.type }),
+            })),
+          });
+          setComments(await taskComments(task.id));
+        })
+      }
     />
   );
 }
@@ -679,6 +704,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">
@@ -742,6 +768,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 () => {
@@ -753,6 +780,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)}
@@ -797,6 +836,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 () => {
@@ -1428,6 +1468,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);
@@ -1740,6 +1781,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} />}
         />

package/src/data.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   ApiError,
+  type CommentInput,
   type ConsoleClient,
   type DocumentFilter,
   EVENT_KINDS,
@@ -9,6 +10,7 @@ import {
   type RestCategory,
   type RestCategoryInput,
   type RestCategoryPatch,
+  type RestComment,
   type RestConnectRequest,
   type RestDecision,
   type RestDecisionInput,
@@ -117,6 +119,10 @@ export interface ConsoleActions {
   abandonRun(id: string): Promise<RestRun>;
   /** Everything that happened to one task of the project, oldest first. */
   taskHistory(taskId: string, signal?: AbortSignal): Promise<RestEvent[]>;
+  /** The discussion on one task of the project, oldest first (ADR-0024). */
+  taskComments(taskId: string, signal?: AbortSignal): Promise<RestComment[]>;
+  /** A word in the discussion on a task, with the files put in it. */
+  comment(taskId: string, input: CommentInput): Promise<RestComment>;
   /** Makes a token for whoever is signed in; the answer carries the secret, this once. */
   createToken(input: RestTokenInput): Promise<RestTokenCreated>;
   revokeToken(id: string): Promise<void>;
@@ -261,7 +267,7 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
           scope.get(signal),
           scope.tasks(undefined, signal),
           scope.decisions(undefined, signal),
-          scope.goals(signal),
+          scope.goals({}, signal),
           scope.runs(undefined, signal),
           scope.members(signal),
         ]);
@@ -560,6 +566,8 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
         }
         return history;
       },
+      taskComments: async (taskId, signal) => (await scope().comments(taskId, signal)).items,
+      comment: (taskId, input) => scope().comment(taskId, input),
       async createToken(input) {
         const made = await client.createToken(input);
         setTokens((await client.tokens()).items);