@skillcdn/console 0.1.18 → 0.1.20

package/src/components/documents.tsx

@@ -1,10 +1,11 @@
-import { type FormEvent, type ReactNode, useState } from "react";
+import { type ClipboardEvent, type FormEvent, type ReactNode, useState } from "react";
 import { agentLabel } from "../agent-name.js";
 import {
   foldersAbove,
   isDocumentPath,
   MAX_DOCUMENT_LENGTH,
   MAX_DOCUMENT_PATH_LENGTH,
+  MAX_FILES_PER_DOCUMENT,
   MAX_LINK_LABEL_LENGTH,
   MAX_SEARCH_LENGTH,
   MAX_TITLE_LENGTH,
@@ -18,13 +19,16 @@ import {
   type RestVersionSummary,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
+import { isPicture, namedFile, placing, unusedName } from "./files.js";
 import { Markdown } from "./markdown.js";
 import { Badge, Button, cx, formatBytes, PersonChip, Time } from "./ui.js";
 
 // The documents of a project (ADR-0009): a folder with its pages and its folders, the way to
 // find pages by their words, one page with its versions, what it links to, what refers to it
-// and its files, and the forms to write and attach. Each takes its data as props and nothing
-// from the network; what people and agents wrote is text or Markdown rendered to elements.
+// and its files, a picture among them shown where the body names it, and the forms to write and
+// attach, a picture pasted into the body attached once the page is written. Each takes its data
+// as props and nothing from the network; what people and agents wrote is text or Markdown
+// rendered to elements.
 
 /** The folder a path is in, as crumbs from the root: the root, then each folder above, then the name. */
 export function DocumentCrumbs(props: {
@@ -194,6 +198,8 @@ export interface DocumentFormProps {
     readonly title: string;
     readonly body: string;
     readonly baseVersion?: number | undefined;
+    /** The pictures pasted or chosen into the body, to attach once the page is written. */
+    readonly files: readonly File[];
   }) => void;
   readonly onCancel?: (() => void) | undefined;
 }
@@ -208,8 +214,42 @@ export function DocumentForm(props: DocumentFormProps) {
   );
   const [title, setTitle] = useState(existing?.title ?? "");
   const [body, setBody] = useState(existing?.body ?? "");
+  const [files, setFiles] = useState<readonly File[]>([]);
   const ready = title.trim().length > 0 && (existing !== undefined || isDocumentPath(path));
 
+  // A picture pasted or chosen goes with the page, placed in the text where pictures are read,
+  // under a name no file of the page has yet; the page carries only so many files.
+  const room = MAX_FILES_PER_DOCUMENT - (existing?.files.length ?? 0);
+  const add = (chosen: readonly File[]): void => {
+    const added: string[] = [];
+    let held = files;
+    for (const file of chosen) {
+      if (!isPicture(file.type) || held.length >= room) {
+        continue;
+      }
+      const taken = [
+        ...(existing?.files.map((attached) => attached.file.name) ?? []),
+        ...held.map((kept) => kept.name),
+      ];
+      const name = unusedName(file.name, taken);
+      const kept = name === file.name ? file : new File([file], name, { type: file.type });
+      held = [...held, kept];
+      added.push(name);
+    }
+    setFiles(held);
+    if (added.length > 0) {
+      setBody((current) => placing(current, added));
+    }
+  };
+  const paste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
+    const pasted = [...event.clipboardData.files].filter((file) => isPicture(file.type));
+    if (pasted.length === 0) {
+      return;
+    }
+    event.preventDefault();
+    add(pasted);
+  };
+
   const submit = (event: FormEvent) => {
     event.preventDefault();
     if (!ready) {
@@ -219,6 +259,7 @@ export function DocumentForm(props: DocumentFormProps) {
       path: existing?.path ?? path,
       title: title.trim(),
       body,
+      files,
       ...(existing === undefined ? {} : { baseVersion: existing.version }),
     });
   };
@@ -257,8 +298,42 @@ export function DocumentForm(props: DocumentFormProps) {
           rows={16}
           placeholder={form.bodyPlaceholder}
           onChange={(event) => setBody(event.target.value)}
+          onPaste={paste}
         />
       </label>
+      {files.length > 0 && (
+        <ul className="sc-chosen-files" aria-label={form.pictures}>
+          {files.map((file) => (
+            <li key={file.name} className="sc-chosen-file">
+              <span>{file.name}</span> <span className="sc-muted">{formatBytes(file.size)}</span>{" "}
+              <Button
+                variant="ghost"
+                size="sm"
+                aria-label={form.removeFile(file.name)}
+                onClick={() => setFiles((current) => current.filter((held) => held !== file))}
+              >
+                ×
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="sc-doc-form-pictures">
+        <label className="sc-button sc-button-ghost sc-button-sm sc-file-choice">
+          {form.addPictures}
+          <input
+            className="sc-file-input"
+            type="file"
+            accept="image/*"
+            multiple
+            onChange={(event) => {
+              add([...(event.target.files ?? [])]);
+              event.target.value = "";
+            }}
+          />
+        </label>
+        <span className="sc-field-hint">{form.pictureHint}</span>
+      </div>
       {props.error !== undefined && (
         <p className="sc-form-error" role="alert">
           {props.error}
@@ -417,6 +492,14 @@ export function DocumentView(props: DocumentViewProps) {
   const docs = words.docs;
   const { document, version } = props;
   const archived = document.archivedAt !== null;
+  // A picture attached to the page is shown where the body names it by its file name, as it is.
+  const named = (source: string): string | undefined => {
+    const name = namedFile(source);
+    const attached = document.files.find(
+      (candidate) => candidate.file.name === name && isPicture(candidate.file.contentType),
+    );
+    return attached === undefined ? undefined : props.fileHref(attached);
+  };
   const shown = version ?? {
     number: document.version,
     title: document.title,
@@ -446,7 +529,7 @@ export function DocumentView(props: DocumentViewProps) {
             </p>
           )}
           {shown.body.trim().length > 0 ? (
-            <Markdown source={shown.body} docHref={props.docHref} />
+            <Markdown source={shown.body} docHref={props.docHref} fileSrc={named} />
           ) : (
             <p className="sc-muted">{docs.nothingOnPage}</p>
           )}

package/src/components/event-feed.tsx

@@ -78,6 +78,10 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
       return feed.event.taskUpdated(fields, task);
     case "task.commented":
       return feed.event.taskCommented(task, data.excerpt);
+    case "task.archived":
+      return feed.event.taskArchived(task);
+    case "task.restored":
+      return feed.event.taskRestored(task);
     case "decision.raised":
       return feed.event.decisionRaised(question);
     case "decision.answered":

package/src/components/files.ts

@@ -0,0 +1,49 @@
+// The files people and agents put on the board, as the pages treat them: which are pictures the
+// pages show in place, whether a text names one, the Markdown that places one, and a name for
+// one more among those taken. Shared by the discussion, the runs and the documents.
+
+/** The kinds of picture the pages show in place: what a browser renders and cannot run. */
+const PICTURE_TYPES: ReadonlySet<string> = new Set([
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "image/webp",
+]);
+
+/** Whether a file is a picture the pages show in place, by the media type the console kept. */
+export function isPicture(contentType: string): boolean {
+  return PICTURE_TYPES.has(contentType);
+}
+
+/** The file name a picture's source names in a text, written as `name` or `./name`. */
+export function namedFile(source: string): string {
+  return source.startsWith("./") ? source.slice(2) : source;
+}
+
+/** Whether the text places a file by its name, as `![words](name)` or `![words](./name)`. */
+export function placed(body: string, name: string): boolean {
+  return body.includes(`](${name})`) || body.includes(`](./${name})`);
+}
+
+/** The text with the pictures named placed after what is written, one `![](name)` a line. */
+export function placing(body: string, names: readonly string[]): string {
+  const lines = names.map((name) => `![](${name})`).join("\n");
+  return body.trim().length === 0 ? lines : `${body.trimEnd()}\n\n${lines}`;
+}
+
+/** A name for a file among those taken already: the same, or with a count before its extension. */
+export function unusedName(name: string, taken: Iterable<string>): string {
+  const names = new Set(taken);
+  if (!names.has(name)) {
+    return name;
+  }
+  const dot = name.lastIndexOf(".");
+  const stem = dot > 0 ? name.slice(0, dot) : name;
+  const extension = dot > 0 ? name.slice(dot) : "";
+  for (let n = 2; ; n += 1) {
+    const candidate = `${stem}-${n}${extension}`;
+    if (!names.has(candidate)) {
+      return candidate;
+    }
+  }
+}

package/src/components/goals.tsx

@@ -10,13 +10,15 @@ import {
   type RestTask,
   TASK_STATES,
 } from "../api.js";
-import { formatDays } from "../dates.js";
+import { formatDays, monthOf } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
+import { GOAL_TASK_VIEWS, type GoalTaskView } from "../router.js";
 import { Markdown } from "./markdown.js";
 import { TaskList } from "./task-list.js";
 import {
   Button,
   CategoryBadge,
+  cx,
   Day,
   DueBadge,
   GoalStateBadge,
@@ -27,9 +29,10 @@ import {
 
 // The roadmap of a project (ADR-0019): its goals, each planned in days as a task is, a start
 // and a target, sorted into a category of the workspace (ADR-0026), with how far its tasks
-// are, read from the board as it stands. The list, one goal with its tasks, and the form an
-// owner sets one with. Each takes its data as props and nothing from the network; what people
-// wrote is shown as text, never as HTML.
+// are, read from the board as it stands. The list, one goal with its tasks (as the board of
+// them, the list by state, or the calendar, the first two given by the composition from the
+// board's own parts), and the form an owner sets one with. Each takes its data as props and
+// nothing from the network; what people wrote is shown as text, never as HTML.
 
 /** A goal's day on the calendar's terms: reached or let go, it is a plain fact; else it may be late. */
 const dueState = (goal: RestGoal) =>
@@ -208,9 +211,23 @@ export function GoalForm(props: GoalFormProps) {
   );
 }
 
+/**
+ * The month a goal's calendar opens on: the month it starts while that is still to come, the
+ * month it is meant to be reached by once that is past, and this month otherwise.
+ */
+export function goalMonth(goal: RestGoal, today: string): string {
+  if (goal.startsOn !== null && today < goal.startsOn) {
+    return monthOf(goal.startsOn);
+  }
+  if (goal.dueOn !== null && today > goal.dueOn) {
+    return monthOf(goal.dueOn);
+  }
+  return monthOf(today);
+}
+
 export interface GoalViewProps {
   readonly goal: RestGoal;
-  /** The tasks of the board; those that work towards the goal are shown, by state. */
+  /** The tasks of the board; those that work towards the goal are shown. */
   readonly tasks: readonly RestTask[];
   readonly taskHref: (task: RestTask) => string;
   /** Where a document of the project is read, by its path, for the links in what was written. */
@@ -221,6 +238,16 @@ export interface GoalViewProps {
   /** Called when an owner moves the goal to another state from here. */
   readonly onMove?: ((goal: RestGoal, state: GoalState) => void) | undefined;
   readonly busy?: boolean | undefined;
+  /** Which view of the goal's tasks is shown: the list when left out. */
+  readonly view?: GoalTaskView | undefined;
+  /** Where each view is; left out, the views cannot be switched from here. */
+  readonly viewHref?: ((view: GoalTaskView) => string) | undefined;
+  /** The board of the goal's tasks, built by the composition from the board's own parts; the list stands in without it. */
+  readonly board?: ReactNode;
+  /** The calendar of the goal's tasks, the same way. */
+  readonly calendar?: ReactNode;
+  /** Called to put every done or dropped task of the goal away (ADR-0029); left out, it is not offered. */
+  readonly onArchiveTasks?: (() => void) | undefined;
 }
 
 export function GoalView(props: GoalViewProps) {
@@ -228,116 +255,156 @@ export function GoalView(props: GoalViewProps) {
   const roadmap = words.roadmap;
   const { goal } = props;
   const towards = props.tasks.filter((task) => task.goalId === goal.id);
+  const view: GoalTaskView = props.view ?? "list";
+  const { viewHref } = props;
+  const done = goal.taskCounts.done;
+  const total = Object.values(goal.taskCounts).reduce((sum, n) => sum + n, 0);
+  const list =
+    towards.length === 0 ? (
+      <p className="sc-muted">{roadmap.noTasks}</p>
+    ) : (
+      TASK_STATES.map((state) => {
+        const inState = towards.filter((task) => task.state === state);
+        return inState.length === 0 ? null : (
+          <div key={state} className="sc-goal-tasks">
+            <h3 className="sc-goal-tasks-state">
+              {words.vocabulary.state[state]}{" "}
+              <span className="sc-column-count">{inState.length}</span>
+            </h3>
+            <TaskList tasks={inState} taskHref={props.taskHref} today={props.today} />
+          </div>
+        );
+      })
+    );
+  const shown =
+    view === "board" && props.board !== undefined
+      ? props.board
+      : view === "calendar" && props.calendar !== undefined
+        ? props.calendar
+        : list;
   return (
-    <div className="sc-task sc-goal-view">
-      <header className="sc-task-header">
-        <h1 className="sc-task-title">{goal.title}</h1>
-        <div className="sc-task-badges">
-          {goal.category !== null && <CategoryBadge category={goal.category} />}
-          <GoalStateBadge state={goal.state} />
-          {goal.dueOn !== null && (
-            <DueBadge dueOn={goal.dueOn} state={dueState(goal)} today={props.today} />
-          )}
+    <div className="sc-goal-page">
+      <header className="sc-goal-header">
+        <div className="sc-task-header">
+          <h1 className="sc-task-title">{goal.title}</h1>
+          <div className="sc-task-badges">
+            {goal.category !== null && <CategoryBadge category={goal.category} />}
+            <GoalStateBadge state={goal.state} />
+            {goal.dueOn !== null && (
+              <DueBadge dueOn={goal.dueOn} state={dueState(goal)} today={props.today} />
+            )}
+          </div>
         </div>
-      </header>
-      <div className="sc-task-body">
-        <div className="sc-task-main">
+        <div className="sc-goal-progress">
           <ProgressBar counts={goal.taskCounts} />
-          {goal.body.length > 0 ? (
-            <Markdown source={goal.body} docHref={props.docHref} />
-          ) : (
-            <p className="sc-muted">{roadmap.nothingMore}</p>
-          )}
-          <section className="sc-task-section" aria-label={roadmap.tasks}>
-            <h2 className="sc-section-title">{roadmap.tasks}</h2>
-            {towards.length === 0 ? (
-              <p className="sc-muted">{roadmap.noTasks}</p>
-            ) : (
-              TASK_STATES.map((state) => {
-                const inState = towards.filter((task) => task.state === state);
-                return inState.length === 0 ? null : (
-                  <div key={state} className="sc-goal-tasks">
-                    <h3 className="sc-goal-tasks-state">
-                      {words.vocabulary.state[state]}{" "}
-                      <span className="sc-column-count">{inState.length}</span>
-                    </h3>
-                    <TaskList tasks={inState} taskHref={props.taskHref} today={props.today} />
-                  </div>
-                );
-              })
-            )}
-          </section>
+          <span className="sc-muted">{roadmap.progress(done, total)}</span>
         </div>
-        <aside className="sc-task-aside" aria-label={words.task.facts}>
-          <dl className="sc-facts">
-            <div>
-              <dt>{roadmap.state}</dt>
-              <dd>
-                {props.onMove === undefined ? (
-                  words.vocabulary.goalState[goal.state]
-                ) : (
-                  <select
-                    className="sc-input"
-                    aria-label={roadmap.state}
-                    value={goal.state}
-                    disabled={props.busy === true}
-                    onChange={(event) => props.onMove?.(goal, event.target.value as GoalState)}
-                  >
-                    {GOAL_STATES.map((state) => (
-                      <option key={state} value={state}>
-                        {words.vocabulary.goalState[state]}
-                      </option>
-                    ))}
-                  </select>
-                )}
-              </dd>
-            </div>
-            <div>
-              <dt>{roadmap.category}</dt>
-              <dd>
-                {goal.category === null ? (
-                  <span className="sc-muted">{roadmap.noCategory}</span>
-                ) : (
-                  <CategoryBadge category={goal.category} />
-                )}
-              </dd>
-            </div>
-            <div>
-              <dt>{roadmap.starts}</dt>
-              <dd>
-                {goal.startsOn === null ? (
-                  <span className="sc-muted">{roadmap.noStart}</span>
-                ) : (
-                  <Day day={goal.startsOn} />
-                )}
-              </dd>
-            </div>
-            <div>
-              <dt>{roadmap.target}</dt>
-              <dd>
-                {goal.dueOn === null ? (
-                  <span className="sc-muted">{roadmap.noTarget}</span>
-                ) : (
-                  <Day day={goal.dueOn} />
-                )}
-              </dd>
-            </div>
-            <div>
-              <dt>{roadmap.setBy}</dt>
-              <dd>
-                <PersonChip person={goal.createdBy} /> <Time iso={goal.createdAt} />
-              </dd>
-            </div>
-          </dl>
+        <dl className="sc-facts-row">
+          <div>
+            <dt>{roadmap.state}</dt>
+            <dd>
+              {props.onMove === undefined ? (
+                words.vocabulary.goalState[goal.state]
+              ) : (
+                <select
+                  className="sc-input"
+                  aria-label={roadmap.state}
+                  value={goal.state}
+                  disabled={props.busy === true}
+                  onChange={(event) => props.onMove?.(goal, event.target.value as GoalState)}
+                >
+                  {GOAL_STATES.map((state) => (
+                    <option key={state} value={state}>
+                      {words.vocabulary.goalState[state]}
+                    </option>
+                  ))}
+                </select>
+              )}
+            </dd>
+          </div>
+          <div>
+            <dt>{roadmap.category}</dt>
+            <dd>
+              {goal.category === null ? (
+                <span className="sc-muted">{roadmap.noCategory}</span>
+              ) : (
+                <CategoryBadge category={goal.category} />
+              )}
+            </dd>
+          </div>
+          <div>
+            <dt>{roadmap.starts}</dt>
+            <dd>
+              {goal.startsOn === null ? (
+                <span className="sc-muted">{roadmap.noStart}</span>
+              ) : (
+                <Day day={goal.startsOn} />
+              )}
+            </dd>
+          </div>
+          <div>
+            <dt>{roadmap.target}</dt>
+            <dd>
+              {goal.dueOn === null ? (
+                <span className="sc-muted">{roadmap.noTarget}</span>
+              ) : (
+                <Day day={goal.dueOn} />
+              )}
+            </dd>
+          </div>
+          <div>
+            <dt>{roadmap.setBy}</dt>
+            <dd>
+              <PersonChip person={goal.createdBy} /> <Time iso={goal.createdAt} />
+            </dd>
+          </div>
           {props.editHref !== undefined && (
-            <div className="sc-task-actions">
-              <a className="sc-button sc-button-secondary" href={props.editHref}>
+            <div>
+              <a className="sc-button sc-button-secondary sc-button-sm" href={props.editHref}>
                 {words.common.edit}
               </a>
             </div>
           )}
-        </aside>
-      </div>
+          {props.onArchiveTasks !== undefined && (
+            <div>
+              <Button
+                variant="secondary"
+                size="sm"
+                disabled={props.busy === true}
+                onClick={props.onArchiveTasks}
+              >
+                {roadmap.archiveTasks}
+              </Button>
+            </div>
+          )}
+        </dl>
+        {goal.body.length > 0 && (
+          <details className="sc-goal-about">
+            <summary className="sc-goal-about-summary">{roadmap.about}</summary>
+            <Markdown source={goal.body} docHref={props.docHref} />
+          </details>
+        )}
+      </header>
+      {viewHref !== undefined && (
+        <nav className="sc-views" aria-label={roadmap.view}>
+          {GOAL_TASK_VIEWS.map((candidate) => (
+            <a
+              key={candidate}
+              className={cx("sc-view", candidate === view && "sc-view-current")}
+              href={viewHref(candidate)}
+              aria-current={candidate === view ? "page" : undefined}
+            >
+              {roadmap.views[candidate]}
+            </a>
+          ))}
+        </nav>
+      )}
+      <section
+        className={cx("sc-goal-tasks-view", `sc-goal-view-${view}`)}
+        aria-label={roadmap.tasks}
+      >
+        {shown}
+      </section>
     </div>
   );
 }

package/src/components/markdown.tsx

@@ -1,6 +1,7 @@
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { isDocumentPath } from "../documents.js";
+import { type Picture, PictureThumb } from "./pictures.js";
 
 // What people and agents write is untrusted. It is rendered as React elements, never as HTML:
 // raw HTML in the source stays text, links are limited to a few schemes and open elsewhere,
@@ -20,6 +21,11 @@ export interface MarkdownProps {
    * is neither one of those nor over https stays text.
    */
   readonly fileSrc?: ((source: string) => string | undefined) | undefined;
+  /**
+   * Called when a picture that came with the text is pressed, to show it large over the page;
+   * left out, such a picture is only seen where it is.
+   */
+  readonly onOpenPicture?: ((picture: Picture, opener: HTMLElement) => void) | undefined;
 }
 
 export function Markdown(props: MarkdownProps) {
@@ -60,6 +66,19 @@ export function Markdown(props: MarkdownProps) {
             if (url === undefined) {
               return <span className="sc-prose-image-text">{alt ?? ""}</span>;
             }
+            if (
+              named !== undefined &&
+              props.onOpenPicture !== undefined &&
+              typeof src === "string"
+            ) {
+              const name = src.startsWith("./") ? src.slice(2) : src;
+              return (
+                <PictureThumb
+                  picture={{ src: named, alt: alt ?? "", name }}
+                  onOpen={props.onOpenPicture}
+                />
+              );
+            }
             return (
               <img
                 src={url}