@skillcdn/console 0.1.17 → 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/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

@@ -53,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,
@@ -106,6 +107,7 @@ import {
   projectHref,
   projectSettingsHref,
   type Route,
+  roadmapHref,
   settingsHref,
   signInFailureOf,
   taskHref,
@@ -702,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">
@@ -765,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 () => {
@@ -776,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)}
@@ -820,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 () => {
@@ -1451,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);
@@ -1763,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

@@ -267,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),
         ]);

package/src/i18n/en.ts

@@ -385,16 +385,33 @@ export const en = {
     inProgress: (n: number) => `${n} in progress`,
     noTasks: "No task works towards it yet.",
     tasks: "Tasks",
+    category: "Category",
+    noCategory: "No category",
+    starts: "Starts",
+    noStart: "No start day",
     target: "Target",
     noTarget: "No target day",
     setBy: "Set by",
     state: "State",
     nothingMore: "Nothing more was written about it.",
+    timeline: {
+      title: "The months",
+      legend: "Category colours",
+      earlier: "A month earlier",
+      later: "A month later",
+      thisMonth: "This month",
+      today: "Today",
+      nothing: "No goal is planned in these months.",
+      noDays: "No day set",
+    },
     form: {
       title: "Title",
       body: "What reaching it means",
       bodyPlaceholder: "What is true once the goal is reached, in Markdown.",
       state: "State",
+      category: "Category",
+      noCategory: "No category",
+      startsOn: "Start day",
       dueOn: "Target day",
       set: "Set the goal",
     },
@@ -734,6 +751,13 @@ export const en = {
     goodUntil: "Good until",
     notActive: "Not active yet",
     lastActive: "Last active",
+    command: (version: string) => `console ${version}`,
+    commandVerdict: {
+      behind: "an update is available",
+      ahead: "newer than this console",
+      outdated: "must be updated",
+      too_new: "too new for this console",
+    },
     disconnect: "Disconnect",
     form: {
       name: "Name",

package/src/i18n/ko.ts

@@ -354,16 +354,33 @@ export const ko: Messages = {
     inProgress: (n) => `${n}개 진행 중`,
     noTasks: "아직 이 목표를 향한 작업이 없습니다.",
     tasks: "작업",
+    category: "카테고리",
+    noCategory: "카테고리 없음",
+    starts: "시작일",
+    noStart: "시작일 없음",
     target: "목표일",
     noTarget: "목표일 없음",
     setBy: "세운 사람",
     state: "상태",
     nothingMore: "더 적힌 내용이 없습니다.",
+    timeline: {
+      title: "달별 로드맵",
+      legend: "카테고리 색",
+      earlier: "한 달 앞으로",
+      later: "한 달 뒤로",
+      thisMonth: "이번 달",
+      today: "오늘",
+      nothing: "이 기간에 잡힌 목표가 없습니다.",
+      noDays: "날짜 없음",
+    },
     form: {
       title: "제목",
       body: "달성의 의미",
       bodyPlaceholder: "목표를 이루면 무엇이 참이 되는지, Markdown으로.",
       state: "상태",
+      category: "카테고리",
+      noCategory: "카테고리 없음",
+      startsOn: "시작일",
       dueOn: "목표일",
       set: "목표 세우기",
     },
@@ -698,6 +715,13 @@ export const ko: Messages = {
     goodUntil: "만료",
     notActive: "아직 활동 없음",
     lastActive: "마지막 활동",
+    command: (version) => `console ${version}`,
+    commandVerdict: {
+      behind: "업데이트할 수 있음",
+      ahead: "이 콘솔보다 새 버전",
+      outdated: "업데이트 필요",
+      too_new: "이 콘솔에는 너무 새 버전",
+    },
     disconnect: "연결 끊기",
     form: {
       name: "이름",

package/src/index.ts

@@ -100,6 +100,13 @@ export {
   ProjectRoleBadge,
   VISIBILITY_LABELS,
 } from "./components/projects.js";
+export {
+  DEFAULT_TIMELINE_MONTHS,
+  GoalTimeline,
+  type GoalTimelineProps,
+  type TimelineBar,
+  timelineBars,
+} from "./components/roadmap.js";
 export {
   RulesForm,
   type RulesFormProps,
@@ -230,6 +237,7 @@ export {
   projectHref,
   projectSettingsHref,
   type Route,
+  roadmapHref,
   settingsHref,
   signInFailureOf,
   type TaskFormKind,

package/src/router.ts

@@ -59,7 +59,8 @@ export type Route =
       readonly month: string | undefined;
       readonly filter: BoardFilter;
     }
-  | { readonly name: "roadmap"; readonly project: string }
+  /** The roadmap of a project: the months shown from the one named, or from this one. */
+  | { readonly name: "roadmap"; readonly project: string; readonly from: string | undefined }
   | { readonly name: "new-goal"; readonly project: string }
   | {
       readonly name: "goal";
@@ -345,7 +346,11 @@ export function matchRoute(pathname: string, search = ""): Route {
     return { name: "calendar", project, month: month ?? undefined, filter: boardFilterOf(params) };
   }
   if (page === "roadmap") {
-    return { name: "roadmap", project };
+    const from = params.get("from");
+    if (from !== null && !isMonth(from)) {
+      return NOT_FOUND;
+    }
+    return { name: "roadmap", project, from: from ?? undefined };
   }
   if (page === "settings") {
     return {
@@ -455,6 +460,12 @@ export function customPageHref(page: string, project?: string): string {
 }
 
 /** Where a goal is set: the form. */
+/** Where a project's roadmap is, from a month on, or from this one when none is named. */
+export function roadmapHref(key: string, from?: string): string {
+  const base = projectHref(key, "roadmap");
+  return from === undefined ? base : `${base}?from=${from}`;
+}
+
 export function newGoalHref(key: string): string {
   return `${PATHS.project}/${key}/roadmap/new`;
 }

package/src/schemas.ts

@@ -196,6 +196,13 @@ export const restMeSchema = z.object({
   /** The language the person chose for the pages (ADR-0012), or `null` for the browser's. */
   language: z.nullable(languageTag),
   signIn: z.array(restProviderSchema),
+  /**
+   * The console's version and the range of command versions it takes, as npm spells one
+   * (ADR-0025): what a console of a person's own compares the package it was built on with.
+   * Every console answers it from 0.1.18; read as optional, so that a command or a console
+   * built on this package still reads an older console's answer, and says it is older.
+   */
+  console: z.optional(z.object({ version: z.string(), clientRange: z.string() })),
 });
 export type RestMe = z.infer<typeof restMeSchema>;
 
@@ -485,6 +492,12 @@ export const restGoalSchema = z.object({
   /** Markdown: what reaching the goal means. Shown as text or rendered to elements, never as HTML. */
   body: z.string(),
   state: z.enum(GOAL_STATES),
+  /** The category the goal is sorted into, as the workspace keeps it, or `null` (ADR-0026). */
+  category: z.nullable(
+    z.object({ key: z.string(), name: z.string(), color: z.enum(CATEGORY_COLORS) }),
+  ),
+  /** The plan (ADR-0026): the day the work towards the goal is meant to begin, or `null`. */
+  startsOn: z.nullable(day),
   /** The day the goal is meant to be reached by, or `null`. */
   dueOn: z.nullable(day),
   createdBy: restPersonSchema,
@@ -505,6 +518,9 @@ export const restGoalInputSchema = z.object({
   body: z.optional(body),
   /** Left out: `planned`. */
   state: z.optional(z.enum(GOAL_STATES)),
+  /** The key of a category of the workspace, or `null` for none. */
+  category: z.optional(z.nullable(categoryKey)),
+  startsOn: z.optional(z.nullable(day)),
   dueOn: z.optional(z.nullable(day)),
 });
 export type RestGoalInput = z.infer<typeof restGoalInputSchema>;
@@ -514,6 +530,8 @@ export const restGoalPatchSchema = z.object({
   title: z.optional(line(MAX_TITLE_LENGTH)),
   body: z.optional(body),
   state: z.optional(z.enum(GOAL_STATES)),
+  category: z.optional(z.nullable(categoryKey)),
+  startsOn: z.optional(z.nullable(day)),
   dueOn: z.optional(z.nullable(day)),
 });
 export type RestGoalPatch = z.infer<typeof restGoalPatchSchema>;
@@ -791,6 +809,8 @@ export const restTokenSchema = z.object({
   expiresAt: z.nullable(instant),
   /** When it was last presented, or `null` if never. */
   lastUsedAt: z.nullable(instant),
+  /** The version of the command that last presented it (`0.1.18`), or `null` when the last to present it named none. */
+  client: z.nullable(z.string()),
 });
 export type RestToken = z.infer<typeof restTokenSchema>;