@skillcdn/console 0.1.16 → 0.1.17

package/src/cli/help.ts

@@ -6,9 +6,11 @@ import {
   MAX_CATEGORIES,
   MAX_CATEGORY_KEY_LENGTH,
   MAX_CATEGORY_NAME_LENGTH,
+  MAX_COMMENTS_PER_TASK,
   MAX_DOCUMENT_LENGTH,
   MAX_DOCUMENT_PATH_LENGTH,
   MAX_FILE_BYTES,
+  MAX_FILES_PER_COMMENT,
   MAX_FILES_PER_DOCUMENT,
   MAX_LINK_LABEL_LENGTH,
   MAX_OPTION_LABEL_LENGTH,
@@ -124,7 +126,7 @@ export const COMMAND_HELP: Readonly<Record<string, CommandHelp>> = {
   task: {
     usage: `task <number|id>  |  task new <title> [--body <markdown>|--file <path>] ${TASK_FIELD_FLAGS}  |  task edit <number|id> [--title <title>] [--body <markdown>|--file <path>] ${TASK_FIELD_FLAGS}`,
     about:
-      "One task in full, with its plan (category, goal, start and due days), what happened to it (when it was started and done, which the board keeps itself), the decisions about it and the runs on it; or a new task written down; or a task changed, only in what the flags say, where none clears a field (priorities: low, normal, high, urgent).",
+      "One task in full, with its plan (category, goal, start and due days), what happened to it (when it was started and done, which the board keeps itself), the decisions about it, the runs on it and the discussion on it, each comment whole with its files; or a new task written down; or a task changed, only in what the flags say, where none clears a field (priorities: low, normal, high, urgent).",
     limits: [
       `title: one line, up to ${MAX_TITLE_LENGTH} characters, saying what is to be done on its own; what it refers to goes in the body`,
       `body: ${MARKDOWN}`,
@@ -336,6 +338,30 @@ export const COMMAND_HELP: Readonly<Record<string, CommandHelp>> = {
     about: "One run in full: its reports, what it handed in, what it waits for, how it ended.",
     refusals: ["run.not_found: no run has that id"],
   },
+  comment: {
+    usage:
+      'comment <number|id> "<markdown>" [--attach <path>]...  |  comment <number|id> --file <path>  |  comment <number|id> -',
+    about:
+      "Says something in the discussion on a task, for its people: an answer to what they asked there, a question that is not a decision, a remark; with files from this machine put in it, which the console keeps and shows on the task, pictures in place. Needs no run. A report is the run's record; a comment is a word to people. Never rewritten: a mistake is corrected in the next one.",
+    limits: [
+      `the comment: ${MARKDOWN}; blank only when a file comes with it`,
+      `a file: up to ${MAX_FILE_BYTES} bytes, not empty; called by its name, without the path; a picture is placed in the text as ![words](its name)`,
+      `at most ${MAX_FILES_PER_COMMENT} files on one comment, together up to ${MAX_FILE_BYTES} bytes`,
+      `at most ${MAX_COMMENTS_PER_TASK} comments on one task`,
+    ],
+    refusals: [
+      "task.not_found: no task has that number or id",
+      "comment.too_many: the task carries as many comments as one may",
+      "comment.too_many_files: more files than one comment may carry",
+      "request.too_large: the files are over the limit together",
+    ],
+  },
+  file: {
+    usage: "file <id> [--out <path>]",
+    about:
+      "Reads a file of the project from the console and writes it on this machine: one a run handed in, one put in a comment, or one attached to a page, by the id the task, the run or the page shows. Written under its own name in the working directory, at --out <path>, or into --out <directory>. Then look at it with your own tools.",
+    refusals: ["file.not_found: no file of this project has that id"],
+  },
   docs: {
     usage: "docs [<folder>] [--search <words>] [--archived]",
     about:
@@ -447,7 +473,10 @@ const SECTIONS: readonly { readonly title: string; readonly commands: readonly s
       "rules",
     ],
   },
-  { title: "Working", commands: ["take", "report", "hand-in", "ask", "finish", "fail", "abandon"] },
+  {
+    title: "Working",
+    commands: ["take", "report", "hand-in", "comment", "file", "ask", "finish", "fail", "abandon"],
+  },
   {
     title: "The documents: the project's pages of Markdown, in folders, by path",
     commands: ["docs", "doc", "write", "attach", "archive", "restore"],

package/src/cli/main.ts

@@ -9,7 +9,7 @@ import { runCli } from "./cli.js";
 import { createFileStore, defaultConfigDir } from "./credentials.js";
 import { createDirectoryStore } from "./directory.js";
 import { listenOn } from "./serve.js";
-import { readBytesAt, readFileAt, readStdin } from "./terminal.js";
+import { readBytesAt, readFileAt, readStdin, writeBytesAt } from "./terminal.js";
 
 // The `console` command: the only place the command reads the process. Everything it does is in
 // cli.ts, which takes what it needs and is what the tests run.
@@ -34,6 +34,7 @@ process.exitCode = await runCli(process.argv.slice(2), {
   hostname: hostname(),
   readFile: readFileAt,
   readBytes: readBytesAt,
+  writeBytes: writeBytesAt,
   store: createFileStore(defaultConfigDir(process.env)),
   directory: createDirectoryStore(process.cwd()),
   sleep: (ms) => new Promise((resolve) => setTimeout(resolve, ms)),

package/src/cli/terminal.ts

@@ -1,4 +1,5 @@
-import { readFile } from "node:fs/promises";
+import { readFile, stat, writeFile } from "node:fs/promises";
+import { join, resolve } from "node:path";
 import process from "node:process";
 
 // The terminal's side of the command: what is read from it. Nothing here is reached by tests,
@@ -26,3 +27,13 @@ export function readFileAt(path: string): Promise<string> {
 export function readBytesAt(path: string): Promise<Uint8Array> {
   return readFile(path);
 }
+
+/**
+ * A file read from the console, written at the path, or into it under the file's name when
+ * the path is a directory; says where it went, in full.
+ */
+export async function writeBytesAt(path: string, bytes: Uint8Array, name: string): Promise<string> {
+  const target = (await stat(path).catch(() => undefined))?.isDirectory() ? join(path, name) : path;
+  await writeFile(target, bytes);
+  return resolve(target);
+}

package/src/client.ts

@@ -18,6 +18,8 @@ import {
   type RestCategoryInput,
   type RestCategoryPatch,
   type RestClaim,
+  type RestComment,
+  type RestComments,
   type RestConnectInput,
   type RestConnection,
   type RestConnectRequest,
@@ -71,6 +73,8 @@ import {
   restCategoriesSchema,
   restCategorySchema,
   restClaimSchema,
+  restCommentSchema,
+  restCommentsSchema,
   restConnectionSchema,
   restConnectRequestSchema,
   restDecisionSchema,
@@ -123,6 +127,22 @@ export interface FileUpload {
   readonly label?: string | undefined;
 }
 
+/** A comment to write on a task: the word, and the files put in it, which go in the one request. */
+export interface CommentInput {
+  /** Markdown; may be blank when a file comes with it. */
+  readonly body: string;
+  readonly files?: readonly FileUpload[] | undefined;
+}
+
+/** The bytes of a file of the project, as the console hands them back, with what it calls them. */
+export interface FileRead {
+  /** The file's name, as the console says it; the id when it says none. */
+  readonly name: string;
+  /** The media type the console answered with, without its parameters. */
+  readonly contentType: string;
+  readonly bytes: Uint8Array;
+}
+
 export interface ClientOptions {
   /** The origin of the console, without a path. Empty: the origin of the page. */
   readonly baseUrl?: string;
@@ -245,8 +265,14 @@ export interface ProjectClient {
   handIn(runId: string, input: RestArtifactInput): Promise<RestRun>;
   /** Hands in a file, on a run of the asker's: the console keeps the bytes. */
   handInFile(runId: string, input: FileUpload): Promise<RestRun>;
-  /** Where the bytes of a file handed in are read, by the artifact's id. */
-  fileUrl(artifactId: string): string;
+  /** Where the bytes of a file of the project are read, by its id: handed in by a run, put in a comment, or attached to a page. */
+  fileUrl(fileId: string): string;
+  /** The bytes of a file of the project, by its id, with the name and the type the console says. */
+  readFile(fileId: string, signal?: AbortSignal): Promise<FileRead>;
+  /** The discussion on a task: its comments, oldest first, whole. */
+  comments(taskId: string, signal?: AbortSignal): Promise<RestComments>;
+  /** Writes a comment on a task, with its files when given, in one request. */
+  comment(taskId: string, input: CommentInput): Promise<RestComment>;
   /** Ends a run: finished or failed by the agent; abandoned by the person it is for, or an administrator. */
   endRun(runId: string, input: RestRunEndInput): Promise<RestRun>;
   /** What happened in the project after event number `after`; `0` for the beginning. Narrowed by `filter`. */
@@ -419,6 +445,37 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
     return parsed.data;
   };
 
+  /** The bytes at `url`, with the name and the type the console says, for a file of the project. */
+  const read = async (
+    url: string,
+    fallbackName: string,
+    signal?: AbortSignal,
+  ): Promise<FileRead> => {
+    let response: Response;
+    try {
+      response = await send(url, {
+        method: "GET",
+        ...(signal === undefined ? {} : { signal }),
+        credentials: token === undefined ? "same-origin" : "omit",
+        headers: token === undefined ? {} : { authorization: `Bearer ${token}` },
+      });
+    } catch (error) {
+      if (signal?.aborted === true) {
+        throw error;
+      }
+      throw new ApiError(0, "network", "The server could not be reached.");
+    }
+    if (!response.ok) {
+      throw await failure(response);
+    }
+    const type = response.headers.get("content-type") ?? "application/octet-stream";
+    return {
+      name: fileNameOf(response.headers.get("content-disposition") ?? "") ?? fallbackName,
+      contentType: type.split(";")[0]?.trim() ?? "application/octet-stream",
+      bytes: new Uint8Array(await response.arrayBuffer()),
+    };
+  };
+
   const flag = (value: boolean | undefined): string | undefined =>
     value === undefined ? undefined : String(value);
   const number = (value: number | undefined): string | undefined =>
@@ -440,6 +497,22 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
     return form;
   };
 
+  /** A comment with files as the parts of a form: the part `body`, and a part `file` for each file. */
+  const commentFormOf = (input: CommentInput): FormData => {
+    const form = new FormData();
+    form.set("body", input.body);
+    for (const file of input.files ?? []) {
+      const bytes =
+        file.bytes instanceof Blob ? file.bytes : new Blob([Uint8Array.from(file.bytes)]);
+      form.append(
+        "file",
+        new File([bytes], file.name, { type: file.contentType ?? "application/octet-stream" }),
+        file.name,
+      );
+    }
+    return form;
+  };
+
   const projectClient = (key: string): ProjectClient => {
     const at = (collection?: Parameters<typeof projectPath>[1], id?: string) =>
       projectPath(key, collection, id);
@@ -530,7 +603,23 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
         request("POST", `${base}${at("runs", runId)}/artifacts`, input, restRunSchema),
       handInFile: (runId, input) =>
         request("POST", `${base}${at("runs", runId)}/files`, formOf(input), restRunSchema),
-      fileUrl: (artifactId) => `${base}${at("files", artifactId)}`,
+      fileUrl: (fileId) => `${base}${at("files", fileId)}`,
+      readFile: (fileId, signal) => read(`${base}${at("files", fileId)}`, fileId, signal),
+      comments: (taskId, signal) =>
+        request(
+          "GET",
+          `${base}${at("tasks", taskId)}/comments`,
+          undefined,
+          restCommentsSchema,
+          signal,
+        ),
+      comment: (taskId, input) =>
+        request(
+          "POST",
+          `${base}${at("tasks", taskId)}/comments`,
+          (input.files?.length ?? 0) > 0 ? commentFormOf(input) : { body: input.body },
+          restCommentSchema,
+        ),
       endRun: (runId, input) =>
         request("POST", `${base}${at("runs", runId)}/end`, input, restRunSchema),
       events: (after, filter = {}, signal) =>
@@ -668,3 +757,23 @@ export function createClient(options: ClientOptions = {}): ConsoleClient {
     signOut: () => request("POST", `${base}${AUTH_ROUTES.logout}`, undefined, undefined),
   };
 }
+
+/**
+ * The file's name as a `content-disposition` header says it: the exact one (`filename*`, UTF-8,
+ * percent-encoded) when it is readable, else the plain one in quotes; nothing when neither is.
+ */
+export function fileNameOf(disposition: string): string | undefined {
+  const exact = /filename\*=UTF-8''([^;]+)/i.exec(disposition);
+  if (exact?.[1] !== undefined) {
+    try {
+      const decoded = decodeURIComponent(exact[1].trim());
+      if (decoded.length > 0) {
+        return decoded;
+      }
+    } catch {
+      // Not percent-encoded as it should be: the plain name below is what there is.
+    }
+  }
+  const plain = /filename="([^"]*)"/i.exec(disposition);
+  return plain?.[1] === undefined || plain[1].length === 0 ? undefined : plain[1];
+}

package/src/components/comments.tsx

@@ -0,0 +1,342 @@
+import { type ClipboardEvent, type FormEvent, type ReactNode, useState } from "react";
+import {
+  agentLabel,
+  MAX_BODY_LENGTH,
+  MAX_FILES_PER_COMMENT,
+  type RestComment,
+  type RestCommentFile,
+  type RestDecision,
+  type RestRun,
+  type RestTask,
+} from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { DecisionCard, type DecisionCardProps } from "./decision-list.js";
+import { Markdown } from "./markdown.js";
+import { RunCard } from "./runs.js";
+import { Button, formatBytes, PersonChip, personName, Time } from "./ui.js";
+
+// The discussion on a task (ADR-0024): what people and agents said about it, each word with
+// the files put in it, read in one thread with the runs on the task and the decisions about
+// it, in the order they came. Takes its data as props and nothing from the network.
+
+/** 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);
+}
+
+/** Whether the text places a file by its name, as `![words](name)` or `![words](./name)`. */
+function placed(body: string, name: string): boolean {
+  return body.includes(`](${name})`) || body.includes(`](./${name})`);
+}
+
+export interface CommentCardProps {
+  readonly comment: RestComment;
+  /** Where a file put in the comment is read: the project's address for it. Left out, a file is named and not linked. */
+  readonly fileHref?: ((file: RestCommentFile) => 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;
+}
+
+export function CommentCard(props: CommentCardProps) {
+  const words = useWords();
+  const { comment } = props;
+  const hrefOf = (file: RestCommentFile) => props.fileHref?.(file);
+  // A picture the text names by its file name is shown where the text puts it; the rest of
+  // the files follow the text, pictures in place and everything else as a link.
+  const named = (source: string): string | undefined => {
+    const name = source.startsWith("./") ? source.slice(2) : source;
+    const file = comment.files.find(
+      (candidate) => candidate.file.name === name && isPicture(candidate.file.contentType),
+    );
+    return file === undefined ? undefined : hrefOf(file);
+  };
+  const following = comment.files.filter((file) => !placed(comment.body, file.file.name));
+  return (
+    <article
+      className="sc-comment"
+      aria-label={words.comments.label(personName(comment.author))}
+      id={comment.id}
+    >
+      <header className="sc-comment-header">
+        <PersonChip person={comment.author} />
+        {comment.agent !== null && (
+          <span className="sc-feed-agent" title={comment.agent}>
+            {words.feed.as(agentLabel(comment.agent))}
+          </span>
+        )}
+        <span className="sc-comment-meta">
+          <Time iso={comment.createdAt} />
+        </span>
+      </header>
+      {comment.body.trim().length > 0 && (
+        <Markdown source={comment.body} docHref={props.docHref} fileSrc={named} />
+      )}
+      {following.length > 0 && (
+        <ul className="sc-comment-files" aria-label={words.comments.files}>
+          {following.map((attached) => {
+            const href = hrefOf(attached);
+            const { file } = attached;
+            if (href !== undefined && isPicture(file.contentType)) {
+              return (
+                <li key={attached.id} className="sc-comment-picture">
+                  <a href={href} rel="noopener nofollow ugc" target="_blank">
+                    <img
+                      src={href}
+                      alt={words.comments.picture(file.name)}
+                      loading="lazy"
+                      decoding="async"
+                    />
+                  </a>
+                  <span className="sc-muted">
+                    {file.name}, {formatBytes(file.size)}
+                  </span>
+                </li>
+              );
+            }
+            return (
+              <li key={attached.id}>
+                {href === undefined ? (
+                  <span>{file.name}</span>
+                ) : (
+                  <a href={href} rel="nofollow ugc">
+                    {file.name}
+                  </a>
+                )}{" "}
+                <span className="sc-muted">{formatBytes(file.size)}</span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </article>
+  );
+}
+
+/** What a comment form hands over: the word, and the files chosen or pasted. */
+export interface CommentDraft {
+  readonly body: string;
+  readonly files: readonly File[];
+}
+
+export interface CommentFormProps {
+  readonly onSubmit: (draft: CommentDraft) => void;
+  readonly busy?: boolean | undefined;
+}
+
+/** A name for a file among those chosen already: the same, or with a count before its extension. */
+function unusedName(name: string, taken: readonly File[]): string {
+  const names = new Set(taken.map((file) => file.name));
+  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;
+    }
+  }
+}
+
+export function CommentForm(props: CommentFormProps) {
+  const words = useWords().comments;
+  const [body, setBody] = useState("");
+  const [files, setFiles] = useState<readonly File[]>([]);
+  const empty = body.trim().length === 0 && files.length === 0;
+
+  const add = (chosen: readonly File[]): File[] => {
+    const added: File[] = [];
+    let held = files;
+    for (const file of chosen) {
+      if (held.length >= MAX_FILES_PER_COMMENT) {
+        break;
+      }
+      const name = unusedName(file.name, held);
+      const kept = name === file.name ? file : new File([file], name, { type: file.type });
+      held = [...held, kept];
+      added.push(kept);
+    }
+    setFiles(held);
+    return added;
+  };
+
+  // A picture pasted in goes with the comment, placed in the text where pictures are read.
+  const paste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
+    const pasted = [...event.clipboardData.files].filter((file) => isPicture(file.type));
+    if (pasted.length === 0) {
+      return;
+    }
+    event.preventDefault();
+    const added = add(pasted);
+    if (added.length > 0) {
+      const lines = added.map((file) => `![](${file.name})`).join("\n");
+      setBody((current) =>
+        current.trim().length === 0 ? lines : `${current.trimEnd()}\n\n${lines}`,
+      );
+    }
+  };
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (empty || props.busy === true) {
+      return;
+    }
+    props.onSubmit({ body, files });
+    setBody("");
+    setFiles([]);
+  };
+
+  return (
+    <form className="sc-comment-form" aria-label={words.write} onSubmit={submit}>
+      <textarea
+        className="sc-input sc-textarea"
+        aria-label={words.write}
+        placeholder={words.placeholder}
+        maxLength={MAX_BODY_LENGTH}
+        rows={4}
+        value={body}
+        disabled={props.busy === true}
+        onChange={(event) => setBody(event.target.value)}
+        onPaste={paste}
+      />
+      {files.length > 0 && (
+        <ul className="sc-comment-chosen" aria-label={words.files}>
+          {files.map((file) => (
+            <li key={file.name} className="sc-comment-chosen-file">
+              <span>{file.name}</span> <span className="sc-muted">{formatBytes(file.size)}</span>{" "}
+              <Button
+                variant="ghost"
+                size="sm"
+                aria-label={words.removeFile(file.name)}
+                onClick={() => setFiles((current) => current.filter((held) => held !== file))}
+              >
+                ×
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="sc-comment-form-actions">
+        <label className="sc-button sc-button-ghost sc-button-sm">
+          {words.chooseFiles}
+          <input
+            className="sc-comment-file-input"
+            type="file"
+            multiple
+            onChange={(event) => {
+              add([...(event.target.files ?? [])]);
+              event.target.value = "";
+            }}
+          />
+        </label>
+        <Button type="submit" variant="primary" disabled={empty || props.busy === true}>
+          {words.one}
+        </Button>
+      </div>
+      <p className="sc-field-hint">{words.hint}</p>
+    </form>
+  );
+}
+
+/** One thing said or done about a task, with when, for the thread's order. */
+export type ThreadItem =
+  | { readonly kind: "comment"; readonly at: string; readonly comment: RestComment }
+  | { readonly kind: "run"; readonly at: string; readonly run: RestRun }
+  | { readonly kind: "decision"; readonly at: string; readonly decision: RestDecision };
+
+/** The comments, the runs and the decisions of a task as one thread, in the order they came. */
+export function threadOf(
+  comments: readonly RestComment[],
+  runs: readonly RestRun[],
+  decisions: readonly RestDecision[],
+): ThreadItem[] {
+  const items: ThreadItem[] = [
+    ...comments.map((comment) => ({ kind: "comment" as const, at: comment.createdAt, comment })),
+    ...runs.map((run) => ({ kind: "run" as const, at: run.startedAt, run })),
+    ...decisions.map((decision) => ({
+      kind: "decision" as const,
+      at: decision.createdAt,
+      decision,
+    })),
+  ];
+  return items.sort((a, b) => (a.at < b.at ? -1 : a.at > b.at ? 1 : 0));
+}
+
+export interface TaskThreadProps {
+  readonly task: RestTask;
+  readonly comments: readonly RestComment[];
+  readonly runs: readonly RestRun[];
+  readonly decisions: readonly RestDecision[];
+  /** Where a file of the project is read, by its id: a run's as a comment's. */
+  readonly fileHref?: ((fileId: string) => string) | undefined;
+  /** Where a decision is answered, for a run that waits for one. */
+  readonly decisionHref?: ((decisionId: string) => string) | undefined;
+  readonly docHref?: ((path: string) => string) | undefined;
+  readonly onAnswer?: DecisionCardProps["onAnswer"];
+  readonly onUpdateDecision?: DecisionCardProps["onUpdate"];
+  readonly onAbandonRun?: ((run: RestRun) => void) | undefined;
+  /** Called with what was written; left out, nothing can be said here. */
+  readonly onComment?: ((draft: CommentDraft) => void) | undefined;
+  readonly busy?: boolean | undefined;
+  readonly empty?: ReactNode;
+}
+
+export function TaskThread(props: TaskThreadProps) {
+  const items = threadOf(props.comments, props.runs, props.decisions);
+  const fileHref = props.fileHref;
+  const shown = (item: ThreadItem): ReactNode => {
+    if (item.kind === "comment") {
+      return (
+        <CommentCard
+          key={item.comment.id}
+          comment={item.comment}
+          fileHref={fileHref === undefined ? undefined : (file) => fileHref(file.id)}
+          docHref={props.docHref}
+        />
+      );
+    }
+    if (item.kind === "run") {
+      return (
+        <RunCard
+          key={item.run.id}
+          run={item.run}
+          decisionHref={props.decisionHref}
+          fileHref={fileHref === undefined ? undefined : (artifact) => fileHref(artifact.id)}
+          docHref={props.docHref}
+          onAbandon={props.onAbandonRun}
+          busy={props.busy}
+        />
+      );
+    }
+    return (
+      <DecisionCard
+        key={item.decision.id}
+        decision={item.decision}
+        task={props.task}
+        docHref={props.docHref}
+        onAnswer={props.onAnswer}
+        onUpdate={props.onUpdateDecision}
+        busy={props.busy}
+      />
+    );
+  };
+  return (
+    <div className="sc-thread">
+      {items.length === 0 && props.empty}
+      {items.map(shown)}
+      {props.onComment !== undefined && (
+        <CommentForm onSubmit={props.onComment} busy={props.busy} />
+      )}
+    </div>
+  );
+}

package/src/components/event-feed.tsx

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

package/src/components/markdown.tsx

@@ -14,6 +14,12 @@ export interface MarkdownProps {
   readonly source: string;
   /** Where a document of the project is read, by its path; left out, such links stay text. */
   readonly docHref?: ((path: string) => string) | undefined;
+  /**
+   * Where a picture named in the text is read, when the text comes with files: given the
+   * source of `![words](source)`, the address of the file it names, or nothing. A picture that
+   * is neither one of those nor over https stays text.
+   */
+  readonly fileSrc?: ((source: string) => string | undefined) | undefined;
 }
 
 export function Markdown(props: MarkdownProps) {
@@ -48,7 +54,9 @@ export function Markdown(props: MarkdownProps) {
             return <span>{children}</span>;
           },
           img({ src, alt, title }) {
-            const url = typeof src === "string" && SAFE_IMAGE.test(src) ? src : undefined;
+            const named = typeof src === "string" ? props.fileSrc?.(src) : undefined;
+            const url =
+              named ?? (typeof src === "string" && SAFE_IMAGE.test(src) ? src : undefined);
             if (url === undefined) {
               return <span className="sc-prose-image-text">{alt ?? ""}</span>;
             }

package/src/components/projects.tsx

@@ -46,18 +46,31 @@ export function ProjectMark(props: {
   const icon = props.project.icon ?? null;
   const src =
     props.iconSrc ?? (icon === null ? undefined : projectIconPath(props.project.key, icon));
+  // The symbol stands in until the image is there, and comes back should the image fail; once
+  // the image is shown, the symbol goes, since an image with clear parts would show it through.
+  const [shown, setShown] = useState<string | undefined>(undefined);
+  const [failed, setFailed] = useState<string | undefined>(undefined);
+  const pictured = src !== undefined && failed !== src;
   return (
     <span
       className={cx(
         "sc-mark",
         `sc-mark-${size}`,
         `sc-category-${projectColorOf(props.project)}`,
-        src !== undefined && "sc-mark-pictured",
+        pictured && "sc-mark-pictured",
       )}
       aria-hidden="true"
     >
-      {projectSymbolOf(props.project)}
-      {src !== undefined && <img className="sc-mark-image" src={src} alt="" />}
+      {(!pictured || shown !== src) && projectSymbolOf(props.project)}
+      {pictured && (
+        <img
+          className="sc-mark-image"
+          src={src}
+          alt=""
+          onLoad={() => setShown(src)}
+          onError={() => setFailed(src)}
+        />
+      )}
     </span>
   );
 }