@skillcdn/console 0.1.19 → 0.1.21

package/src/components/comments.tsx

@@ -11,6 +11,7 @@ import {
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { DecisionCard, type DecisionCardProps } from "./decision-list.js";
+import { isPicture, namedFile, placed, placing, unusedName } from "./files.js";
 import { Markdown } from "./markdown.js";
 import { Lightbox, PictureThumb, usePicture } from "./pictures.js";
 import { RunCard } from "./runs.js";
@@ -21,24 +22,6 @@ import { Button, formatBytes, PersonChip, personName, Time } from "./ui.js";
 // it, in the order they came. A picture is a thumbnail that opens large over the page. 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. */
@@ -55,7 +38,7 @@ export function CommentCard(props: CommentCardProps) {
   // 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 name = namedFile(source);
     const file = comment.files.find(
       (candidate) => candidate.file.name === name && isPicture(candidate.file.contentType),
     );
@@ -141,23 +124,6 @@ export interface CommentFormProps {
   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("");
@@ -171,7 +137,10 @@ export function CommentForm(props: CommentFormProps) {
       if (held.length >= MAX_FILES_PER_COMMENT) {
         break;
       }
-      const name = unusedName(file.name, held);
+      const name = unusedName(
+        file.name,
+        held.map((kept) => kept.name),
+      );
       const kept = name === file.name ? file : new File([file], name, { type: file.type });
       held = [...held, kept];
       added.push(kept);
@@ -189,9 +158,11 @@ export function CommentForm(props: CommentFormProps) {
     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}`,
+        placing(
+          current,
+          added.map((file) => file.name),
+        ),
       );
     }
   };

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/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/runs.tsx

@@ -1,11 +1,15 @@
 import type { ReactNode } from "react";
 import { agentLabel, type RestArtifact, type RestRun, type RunStatus } from "../api.js";
 import { useWords } from "../i18n/index.js";
+import { isPicture, namedFile } from "./files.js";
 import { Markdown } from "./markdown.js";
+import { Lightbox, type Picture, PictureThumb, usePicture } from "./pictures.js";
 import { Badge, Button, formatBytes, PersonChip, personName, Time } from "./ui.js";
 
 // A run: one agent at work on one task for one person, with what it reported, what it handed
-// in, and what it waits for. Takes its data as props and nothing from the network.
+// in, and what it waits for. A picture handed in is seen small where it is listed and large
+// over the page, as a picture in a comment is, and a report that names it by its file name
+// shows it where the words are. Takes its data as props and nothing from the network.
 
 /** The words of a run's status in English: the default pack's. */
 export const RUN_STATUS_LABELS: Readonly<Record<RunStatus, string>> = {
@@ -48,6 +52,19 @@ export function RunCard(props: RunCardProps) {
   const words = useWords().runs;
   const { run } = props;
   const open = run.status === "running" || run.status === "waiting";
+  const pictures = usePicture();
+  const hrefOf = (artifact: RestArtifact) => props.fileHref?.(artifact);
+  // A report that names a picture handed in, by its file name, shows it where the words are.
+  const named = (source: string): string | undefined => {
+    const name = namedFile(source);
+    const artifact = run.artifacts.find(
+      (candidate) =>
+        candidate.file !== null &&
+        candidate.file.name === name &&
+        isPicture(candidate.file.contentType),
+    );
+    return artifact === undefined ? undefined : hrefOf(artifact);
+  };
   return (
     <article className="sc-run" aria-label={words.label(run.agent, personName(run.person))}>
       <header className="sc-run-header">
@@ -97,7 +114,12 @@ export function RunCard(props: RunCardProps) {
           {run.reports.map((report) => (
             <li key={report.id} className="sc-report">
               <Time iso={report.createdAt} />
-              <Markdown source={report.body} docHref={props.docHref} />
+              <Markdown
+                source={report.body}
+                docHref={props.docHref}
+                fileSrc={named}
+                onOpenPicture={pictures.open}
+              />
             </li>
           ))}
         </ol>
@@ -106,26 +128,41 @@ export function RunCard(props: RunCardProps) {
         <ul className="sc-link-list" aria-label={words.handedIn}>
           {run.artifacts.map((artifact) => (
             <li key={artifact.id}>
-              <ArtifactLink artifact={artifact} fileHref={props.fileHref} />
+              <ArtifactItem
+                artifact={artifact}
+                href={hrefOf(artifact)}
+                onOpenPicture={pictures.open}
+              />
             </li>
           ))}
         </ul>
       )}
       {run.summary !== null && (
         <div className="sc-run-summary">
-          <Markdown source={run.summary} docHref={props.docHref} />
+          <Markdown
+            source={run.summary}
+            docHref={props.docHref}
+            fileSrc={named}
+            onOpenPicture={pictures.open}
+          />
         </div>
       )}
+      <Lightbox picture={pictures.shown} onClose={pictures.close} />
     </article>
   );
 }
 
-/** A link as it was handed in; a file by its name, with its size, read from the console. */
-function ArtifactLink(props: {
+/**
+ * What was handed in: a link as it was given; a file by its name, with its size, read from the
+ * console; a picture seen small, and large when pressed.
+ */
+function ArtifactItem(props: {
   readonly artifact: RestArtifact;
-  readonly fileHref: ((artifact: RestArtifact) => string) | undefined;
+  readonly href: string | undefined;
+  readonly onOpenPicture: (picture: Picture, opener: HTMLElement) => void;
 }) {
-  const { artifact } = props;
+  const words = useWords().runs;
+  const { artifact, href } = props;
   if (artifact.file === null) {
     return (
       <a href={artifact.url ?? ""} target="_blank" rel="noopener noreferrer nofollow ugc">
@@ -133,20 +170,41 @@ function ArtifactLink(props: {
       </a>
     );
   }
-  const href = props.fileHref?.(artifact);
+  const { file } = artifact;
+  const about = (
+    <span className="sc-muted">
+      {artifact.label === null ? "" : `${file.name}, `}
+      {formatBytes(file.size)}
+    </span>
+  );
+  if (href !== undefined && isPicture(file.contentType)) {
+    return (
+      <div className="sc-artifact-picture">
+        <PictureThumb
+          picture={{
+            src: href,
+            alt: artifact.label ?? words.picture(file.name),
+            name: file.name,
+            size: file.size,
+          }}
+          onOpen={props.onOpenPicture}
+        />
+        <span>
+          {artifact.label ?? file.name} {about}
+        </span>
+      </div>
+    );
+  }
   return (
     <>
       {href === undefined ? (
-        <span>{artifact.label ?? artifact.file.name}</span>
+        <span>{artifact.label ?? file.name}</span>
       ) : (
         <a href={href} rel="nofollow ugc">
-          {artifact.label ?? artifact.file.name}
+          {artifact.label ?? file.name}
         </a>
       )}{" "}
-      <span className="sc-muted">
-        {artifact.label === null ? "" : `${artifact.file.name}, `}
-        {formatBytes(artifact.file.size)}
-      </span>
+      {about}
     </>
   );
 }

package/src/components/task-view.tsx

@@ -16,7 +16,7 @@ import type {
 import { formatDay } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
 import type { TaskFormKind } from "../router.js";
-import { OPEN_TASK_STATES, TASK_STATES } from "../vocabulary.js";
+import { TASK_STATES } from "../vocabulary.js";
 import { type CommentDraft, TaskThread } from "./comments.js";
 import { DecisionForm } from "./decision-form.js";
 import { EventFeed } from "./event-feed.js";
@@ -354,17 +354,15 @@ export function TaskView(props: TaskViewProps) {
               <a className="sc-button sc-button-secondary" href={props.formHref("ask")}>
                 {words.task.raiseDecision}
               </a>
-              {props.onArchive !== undefined &&
-                task.archivedAt === null &&
-                !OPEN_TASK_STATES.includes(task.state) && (
-                  <Button
-                    variant="secondary"
-                    disabled={props.busy === true}
-                    onClick={() => props.onArchive?.(task)}
-                  >
-                    {words.task.archive}
-                  </Button>
-                )}
+              {props.onArchive !== undefined && task.archivedAt === null && (
+                <Button
+                  variant="secondary"
+                  disabled={props.busy === true}
+                  onClick={() => props.onArchive?.(task)}
+                >
+                  {words.task.archive}
+                </Button>
+              )}
               {props.onRestore !== undefined && task.archivedAt !== null && (
                 <Button
                   variant="secondary"

package/src/console.tsx

@@ -490,7 +490,6 @@ function ArchivePage(props: { readonly project: RestProject; readonly data: Cons
         <h1 className="sc-page-title">{archive.title}</h1>
         <LinkButton href={projectHref(key)}>{words.nav.board}</LinkButton>
       </div>
-      <p className="sc-lead">{archive.lead}</p>
       {error !== undefined && <Callout tone="danger">{error}</Callout>}
       {!loaded ? (
         <Spinner label={archive.loading} />
@@ -739,12 +738,21 @@ function ProjectPage(props: {
     return (
       <>
         <div className="sc-page-head">
-          <h1 className="sc-page-title">{project.name}</h1>
-          <LinkButton href={newTaskHref(key)} variant="primary">
-            {words.board.writeTask}
-          </LinkButton>
+          <div className="sc-page-heading">
+            <h1 className="sc-page-title">{project.name}</h1>
+            {project.description.length > 0 && (
+              <p className="sc-page-lead" title={project.description}>
+                {project.description}
+              </p>
+            )}
+          </div>
+          <div className="sc-page-actions">
+            <LinkButton href={projectHref(key, "archive")}>{words.board.archive}</LinkButton>
+            <LinkButton href={newTaskHref(key)} variant="primary">
+              {words.board.writeTask}
+            </LinkButton>
+          </div>
         </div>
-        {project.description.length > 0 && <p className="sc-lead">{project.description}</p>}
         {error !== undefined && <Callout tone="danger">{error}</Callout>}
         {data.tasks.length > 0 && (
           <BoardFilters
@@ -763,7 +771,9 @@ function ProjectPage(props: {
           taskHref={href}
           onOpen={(task) => navigation.go(href(task))}
           onMove={onMove}
-          archiveHref={projectHref(key, "archive")}
+          editHref={(task) => taskHref(key, task.number, "edit")}
+          onEdit={(task) => navigation.go(taskHref(key, task.number, "edit"))}
+          onArchive={(task) => void act(() => data.actions.archiveTask(task.id))}
           empty={
             data.tasks.length === 0 ? (
               <EmptyState
@@ -1051,7 +1061,9 @@ function ProjectPage(props: {
               onOpen={(task) => navigation.go(href(task))}
               onMove={onMove}
               today={now}
-              archiveHref={projectHref(key, "archive")}
+              editHref={(task) => taskHref(key, task.number, "edit")}
+              onEdit={(task) => navigation.go(taskHref(key, task.number, "edit"))}
+              onArchive={(task) => void act(() => data.actions.archiveTask(task.id))}
               empty={
                 towards.length === 0 ? <p className="sc-muted">{roadmap.noTasks}</p> : undefined
               }

package/src/docs-page.tsx

@@ -159,6 +159,22 @@ export function DocsPage(props: DocsPageProps) {
   const toDecision = (decisionId: string) => decisionHref(key, decisionId);
   /** The plain address of what the page is on. */
   const here = toDoc(path);
+  // The pictures put into the body are attached once the page is written, one request each.
+  const attachAll = async (
+    at: string,
+    files: readonly File[],
+    written: RestDocument,
+  ): Promise<RestDocument> => {
+    let page = written;
+    for (const file of files) {
+      page = await actions.attachDocumentFile(at, {
+        name: file.name,
+        bytes: file,
+        ...(file.type === "" ? {} : { contentType: file.type }),
+      });
+    }
+    return page;
+  };
   const page = document !== null && document !== undefined ? document : undefined;
   /** The folder a new page goes in: this one, or the one the page shown is in. */
   const folder = page === undefined ? path : folderOf(path);
@@ -218,6 +234,7 @@ export function DocsPage(props: DocsPageProps) {
                   title: input.title,
                   body: input.body,
                 });
+                await attachAll(written.path, input.files, written);
                 navigation.replace(toDoc(written.path));
               })
             }
@@ -255,7 +272,7 @@ export function DocsPage(props: DocsPageProps) {
                     body: input.body,
                     ...(input.baseVersion === undefined ? {} : { baseVersion: input.baseVersion }),
                   });
-                  setDocument(written);
+                  setDocument(await attachAll(page.path, input.files, written));
                   navigation.replace(here);
                 })
               }

package/src/i18n/en.ts

@@ -221,9 +221,8 @@ export const en = {
       title: "Nothing on the board yet",
       body: "Write the first task: what is to be done, and for whom.",
     },
-    moveTo: "Move to",
-    grip: "Drag to another column",
     archive: "Archive",
+    menu: "Task menu",
     decisions: (n: number) => count(n, "decision", "decisions"),
     decisionsTitle: "Decisions waiting for a person",
     filters: {
@@ -603,11 +602,10 @@ export const en = {
 
   archive: {
     title: "Archive",
-    lead: "Tasks done or dropped and put away: out of the board, the lists and the calendar, each still open by its number. Brought back from here.",
     loading: "Loading the archive",
     empty: {
       title: "Nothing is put away",
-      body: "A task done or dropped is put away from its page, with its goal, or by the console after a while.",
+      body: "A task is put away from its page or its card, with its goal once the goal is closed, or by the console a while after it was done or dropped.",
     },
     since: "put away",
     restore: "Bring back",
@@ -624,6 +622,7 @@ export const en = {
     answerIt: "answer it",
     reports: "Reports",
     handedIn: "Handed in",
+    picture: (name: string) => `The picture ${name}`,
     label: (agent: string, name: string) => `${agent} for ${name}`,
   },
 
@@ -734,6 +733,11 @@ export const en = {
       body: "Body",
       bodyPlaceholder:
         "Markdown. A link to another page's path, such as guides/onboarding, refers to that page.",
+      pictures: "Pictures",
+      addPictures: "Add pictures",
+      pictureHint:
+        "A picture pasted or chosen here is attached to the page once it is written; ![words](its name) places it in the text.",
+      removeFile: (name: string) => `Take ${name} out`,
       write: "Write the page",
       writeVersion: "Write a new version",
     },

package/src/i18n/ko.ts

@@ -190,9 +190,8 @@ export const ko: Messages = {
       title: "보드에 아직 아무것도 없습니다",
       body: "첫 작업을 쓰세요. 무엇을, 누구를 위해 할지.",
     },
-    moveTo: "이동",
-    grip: "끌어서 다른 열로",
     archive: "보관함",
+    menu: "작업 메뉴",
     decisions: (n) => `결정 ${n}건`,
     decisionsTitle: "사람을 기다리는 결정",
     filters: {
@@ -567,11 +566,10 @@ export const ko: Messages = {
 
   archive: {
     title: "보관함",
-    lead: "완료·폐기된 뒤 보관된 작업입니다. 보드·목록·캘린더에서는 빠지고, 번호로는 여전히 열립니다. 여기서 되살립니다.",
     loading: "보관함을 불러오는 중",
     empty: {
       title: "보관된 작업이 없습니다",
-      body: "완료·폐기된 작업은 작업 페이지에서, 목표를 닫을 때 함께, 또는 일정 기간 뒤 콘솔이 보관합니다.",
+      body: "작업은 작업 페이지나 카드 메뉴에서, 목표를 닫을 때 함께, 또는 완료·폐기된 뒤 일정 기간이 지나면 콘솔이 보관합니다.",
     },
     since: "보관",
     restore: "되살리기",
@@ -588,6 +586,7 @@ export const ko: Messages = {
     answerIt: "답변하기",
     reports: "보고",
     handedIn: "제출물",
+    picture: (name) => `그림 ${name}`,
     label: (agent, name) => `${name}을(를) 위한 ${agent}`,
   },
 
@@ -698,6 +697,11 @@ export const ko: Messages = {
       body: "본문",
       bodyPlaceholder:
         "Markdown. guides/onboarding 같은 다른 페이지의 경로로 링크하면 그 페이지를 참조합니다.",
+      pictures: "그림",
+      addPictures: "그림 추가",
+      pictureHint:
+        "여기에 붙여 넣거나 고른 그림은 페이지를 쓸 때 첨부됩니다. ![설명](파일 이름)으로 본문에 넣을 수 있습니다.",
+      removeFile: (name) => `${name} 빼기`,
       write: "페이지 쓰기",
       writeVersion: "새 버전 쓰기",
     },