@skillcdn/console 0.1.10 → 0.1.12

package/src/console.tsx

@@ -1,8 +1,17 @@
-import { type ComponentType, StrictMode, useCallback, useEffect, useMemo, useState } from "react";
+import {
+  type ComponentType,
+  type ReactNode,
+  StrictMode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { createRoot, type Root } from "react-dom/client";
 import {
   type ConsoleClient,
   createClient,
+  type FileUpload,
   OPEN_TASK_STATES,
   type RestAnswerInput,
   type RestDecision,
@@ -34,6 +43,7 @@ import {
   ProjectForm,
   ProjectList,
   type ProjectListProps,
+  ProjectMark,
 } from "./components/projects.js";
 import {
   type Brand,
@@ -48,7 +58,7 @@ import { TaskForm } from "./components/task-form.js";
 import { TaskList } from "./components/task-list.js";
 import { TaskView, type TaskViewProps } from "./components/task-view.js";
 import { NewToken, TokenForm, TokenList, type TokenListProps } from "./components/tokens.js";
-import { Button, Callout, EmptyState, Spinner } from "./components/ui.js";
+import { Button, Callout, EmptyState, personName, Spinner } from "./components/ui.js";
 import { WorkList, type WorkListProps } from "./components/work.js";
 import { ConnectPage } from "./connect-page.js";
 import { type ConsoleData, useConsoleData } from "./data.js";
@@ -59,11 +69,13 @@ import {
   DEFAULT_LANGUAGES,
   LanguageContext,
   type LanguagePack,
+  type Messages,
   useWords,
 } from "./i18n/index.js";
 import {
   boardHref,
   calendarHref,
+  customPageHref,
   decisionHref,
   docHref,
   goalHref,
@@ -126,6 +138,52 @@ export const DEFAULT_COMPONENTS: ConsoleComponents = {
   CategoryList,
 };
 
+/**
+ * A page a console adds of its own, shown as a tab beside the console's: on the workspace, or
+ * on every project. The address is `/pages/<key>`, or `/projects/<project>/pages/<key>`.
+ */
+export interface CustomPage {
+  /** What the address says, and what tells the page apart: lowercase letters, digits and hyphens. */
+  readonly key: string;
+  /** What the tab says: one word for every language, or a word by language tag, `en` standing in for a tag without one. */
+  readonly label: string | Readonly<Record<string, string>>;
+  /** Where the tab is: among the workspace's pages, or among each project's. */
+  readonly level: "workspace" | "project";
+  /** Whether the page takes the whole width of the window, as the board does. */
+  readonly wide?: boolean | undefined;
+  /** What the page shows, given what the default pages are given. */
+  readonly render: (context: CustomPageContext) => ReactNode;
+}
+
+/** What a page of a console's own is given: the data the default pages read, and the means they use. */
+export interface CustomPageContext {
+  /** The workspace and, on a project, the project the page is on, kept current; with the actions. */
+  readonly data: ConsoleData;
+  /** The project the page is on, or nothing on the workspace. */
+  readonly project: RestProject | undefined;
+  /** The client, for what the data does not carry. */
+  readonly client: ConsoleClient;
+  readonly navigation: Navigation;
+  /** The words of the language the pages speak, and its tag. */
+  readonly words: Messages;
+  readonly language: string;
+}
+
+/** What the tab of a page of one's own says in a language: its word for the tag, for the language alone, for English, or the first it has. */
+export function customPageLabel(page: CustomPage, tag: string): string {
+  if (typeof page.label === "string") {
+    return page.label;
+  }
+  const language = tag.split("-")[0] ?? tag;
+  return (
+    page.label[tag] ??
+    page.label[language] ??
+    page.label.en ??
+    Object.values(page.label)[0] ??
+    page.key
+  );
+}
+
 export interface ConsoleConfig {
   /** The origin of the console's API. Left out, the page's own origin. */
   readonly baseUrl?: string | undefined;
@@ -139,6 +197,8 @@ export interface ConsoleConfig {
   readonly brand?: Brand | undefined;
   /** The client to talk to the server with; made from `baseUrl` when left out. For tests. */
   readonly client?: ConsoleClient | undefined;
+  /** Pages of the console's own, as tabs beside the default ones. */
+  readonly pages?: readonly CustomPage[] | undefined;
 }
 
 export interface ConsoleApp {
@@ -354,9 +414,12 @@ function ProjectsPage(props: {
         <section className="sc-panel sc-panel-form" aria-label={words.form.aria}>
           <ProjectForm
             busy={busy}
-            onSubmit={(input) =>
+            onSubmit={(input, icon) =>
               void act(async () => {
-                const made = await data.actions.createProject(input as RestProjectInput);
+                const made = await data.actions.createProject(
+                  input as RestProjectInput,
+                  icon instanceof File ? uploadOf(icon) : undefined,
+                );
                 navigation.replace(projectHref(made.key));
               })
             }
@@ -532,7 +595,6 @@ function ProjectPage(props: {
         )}
         <components.Board
           tasks={shown}
-          runs={data.runs}
           taskHref={href}
           onOpen={(task) => navigation.go(href(task))}
           onMove={onMove}
@@ -592,7 +654,9 @@ function ProjectPage(props: {
   if (route.name === "calendar") {
     const now = today();
     const month = route.month ?? monthOf(now);
-    const open = data.tasks.filter((task) => OPEN_TASK_STATES.includes(task.state));
+    const me = data.me?.person ?? undefined;
+    const shown = filterTasks(data.tasks, route.filter, me);
+    const open = shown.filter((task) => OPEN_TASK_STATES.includes(task.state));
     const overdue = open.filter((task) => task.dueOn !== null && task.dueOn < now).sort(byDue);
     const unscheduled = open.filter((task) => task.dueOn === null).sort(byDue);
     const calendar = words.calendar;
@@ -605,12 +669,25 @@ function ProjectPage(props: {
           </LinkButton>
         </div>
         <p className="sc-lead">{calendar.lead}</p>
+        {data.tasks.length > 0 && (
+          <BoardFilters
+            filter={route.filter}
+            categories={data.categories}
+            goals={data.goals}
+            people={data.people}
+            me={me}
+            shown={shown.length}
+            total={data.tasks.length}
+            onChange={(filter) => navigation.replace(calendarHref(key, route.month, filter))}
+          />
+        )}
         <components.Calendar
-          tasks={data.tasks}
+          tasks={shown}
           month={month}
           today={now}
+          categories={data.categories}
           taskHref={href}
-          monthHref={(wanted) => calendarHref(key, wanted)}
+          monthHref={(wanted) => calendarHref(key, wanted, route.filter)}
         />
         <div className="sc-calendar-below">
           <section className="sc-task-section" aria-label={calendar.overdue}>
@@ -643,7 +720,7 @@ function ProjectPage(props: {
             <h2 className="sc-section-title">{calendar.workload.title}</h2>
             <p className="sc-lead">{calendar.workload.lead}</p>
             <Workload
-              tasks={data.tasks}
+              tasks={shown}
               today={now}
               personHref={(person) =>
                 boardHref(key, person === undefined ? {} : { person: person.id })
@@ -950,8 +1027,15 @@ function ProjectPage(props: {
           <ProjectForm
             project={project}
             busy={busy}
-            onSubmit={(input) =>
-              void act(() => data.actions.updateProject(input as RestProjectPatch))
+            onSubmit={(input, icon) =>
+              void act(async () => {
+                await data.actions.updateProject(input as RestProjectPatch);
+                if (icon === null) {
+                  await data.actions.removeProjectIcon();
+                } else if (icon !== undefined) {
+                  await data.actions.setProjectIcon(uploadOf(icon));
+                }
+              })
             }
           />
         </section>
@@ -961,6 +1045,13 @@ function ProjectPage(props: {
   return <NothingHere />;
 }
 
+/** A file a person chose, as the client sends it: its name, its bytes and the type the browser says. */
+const uploadOf = (file: File): FileUpload => ({
+  name: file.name,
+  bytes: file,
+  ...(file.type === "" ? {} : { contentType: file.type }),
+});
+
 function NothingHere() {
   const words = useWords();
   return (
@@ -1014,7 +1105,9 @@ function PersonAgentsPage(props: {
   return (
     <>
       <div className="sc-page-head">
-        <h1 className="sc-page-title">{words.people.agentsOf(person?.login ?? "?")}</h1>
+        <h1 className="sc-page-title">
+          {words.people.agentsOf(person === undefined ? "?" : personName(person))}
+        </h1>
         <LinkButton href={PATHS.people}>{words.nav.people}</LinkButton>
       </div>
       <p className="sc-lead">
@@ -1226,6 +1319,7 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
   const client = config.client ?? createClient({ baseUrl: config.baseUrl ?? "" });
   const fallbackTitle = config.title ?? "Console";
   const languages = config.languages ?? DEFAULT_LANGUAGES;
+  const pages = config.pages ?? [];
 
   function App(props: { readonly initialPath?: string | undefined }) {
     const { location, navigation } = useNavigation(props.initialPath);
@@ -1324,16 +1418,22 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
                 current: route.name === "agents" || route.name === "new-token",
               },
             ]),
-        // The categories are read by everyone and kept by an administrator; only they need the page.
-        ...(data.me.person.role === "admin" && !viaToken
-          ? [
-              {
-                href: PATHS.categories,
-                label: words.nav.categories,
-                current: route.name === "categories",
-              },
-            ]
-          : []),
+        // The categories are read by everyone, for what the colours mean, and kept by an administrator.
+        {
+          href: PATHS.categories,
+          label: words.nav.categories,
+          current: route.name === "categories",
+        },
+        ...pages
+          .filter((candidate) => candidate.level === "workspace")
+          .map((candidate) => ({
+            href: customPageHref(candidate.key),
+            label: customPageLabel(candidate, pack.tag),
+            current:
+              route.name === "custom" &&
+              route.level === "workspace" &&
+              route.page === candidate.key,
+          })),
       ];
       const nav: NavItem[] =
         projectKey === undefined
@@ -1394,8 +1494,27 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
                     },
                   ]
                 : []),
+              ...pages
+                .filter((candidate) => candidate.level === "project")
+                .map((candidate) => ({
+                  href: customPageHref(candidate.key, projectKey),
+                  label: customPageLabel(candidate, pack.tag),
+                  current:
+                    route.name === "custom" &&
+                    route.level === "project" &&
+                    route.page === candidate.key,
+                })),
             ];
-      let page: React.ReactNode;
+      /** A page of the console's own at the address, or nothing there. */
+      const customPageOf = (key: string, level: CustomPage["level"]): ReactNode => {
+        const found = pages.find((candidate) => candidate.key === key && candidate.level === level);
+        return found === undefined ? (
+          <NothingHere />
+        ) : (
+          found.render({ data, project, client, navigation, words, language: pack.tag })
+        );
+      };
+      let page: ReactNode;
       if (!data.loaded || route.name === "moved") {
         page = (
           <div className="sc-loading">
@@ -1413,6 +1532,8 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
             making={route.name === "new-project"}
           />
         );
+      } else if (route.name === "custom" && route.level === "workspace") {
+        page = customPageOf(route.page, "workspace");
       } else if (projectKey === undefined) {
         page = (
           <WorkspacePage
@@ -1436,6 +1557,8 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
             <Spinner label={words.common.loadingProject} />
           </div>
         );
+      } else if (route.name === "custom") {
+        page = customPageOf(route.page, "project");
       } else {
         page = (
           <ProjectPage
@@ -1454,7 +1577,12 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
           project={
             projectKey === undefined
               ? undefined
-              : { name: project?.name ?? projectKey, href: projectHref(projectKey) }
+              : {
+                  name: project?.name ?? projectKey,
+                  href: projectHref(projectKey),
+                  mark:
+                    project === undefined ? undefined : <ProjectMark project={project} size="sm" />,
+                }
           }
           nav={nav}
           menu={workspaceNav}
@@ -1473,7 +1601,12 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
           }}
           person={data.me.person}
           live={projectKey === undefined ? undefined : data.live}
-          wide={route.name === "board" || route.name === "calendar"}
+          wide={
+            route.name === "board" ||
+            route.name === "calendar" ||
+            (route.name === "custom" &&
+              pages.some((candidate) => candidate.key === route.page && candidate.wide === true))
+          }
           onNavigate={(href) => navigation.go(href)}
           onSignOut={viaToken ? undefined : () => void data.actions.signOut()}
         >

package/src/data.ts

@@ -58,10 +58,13 @@ const FEED_MAX_PAGES = 20;
 const RELOAD_DELAY_MS = 150;
 
 export interface ConsoleActions {
-  /** Makes a project, whose owner the person becomes. */
-  createProject(input: RestProjectInput): Promise<RestProject>;
+  /** Makes a project, whose owner the person becomes, with an image for its mark when one is given. */
+  createProject(input: RestProjectInput, icon?: FileUpload): Promise<RestProject>;
   /** Changes the settings of the project the page is on; for an owner. */
   updateProject(patch: RestProjectPatch): Promise<RestProject>;
+  /** Sets the image for the mark of the project the page is on, or takes it away; for an owner. */
+  setProjectIcon(input: FileUpload): Promise<RestProject>;
+  removeProjectIcon(): Promise<RestProject>;
   addMember(input: RestMemberInput): Promise<RestMember>;
   updateMember(personId: string, patch: RestMemberPatch): Promise<RestMember>;
   removeMember(personId: string): Promise<void>;
@@ -387,10 +390,11 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
       return client.project(projectKey);
     };
     return {
-      async createProject(input) {
+      async createProject(input, icon) {
         const made = await client.createProject(input);
+        const marked = icon === undefined ? made : await client.project(made.key).setIcon(icon);
         await refreshWorkspace();
-        return made;
+        return marked;
       },
       async updateProject(patch) {
         const changed = await scope().update(patch);
@@ -398,6 +402,18 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
         await refreshWorkspace();
         return changed;
       },
+      async setProjectIcon(input) {
+        const changed = await scope().setIcon(input);
+        setProject(changed);
+        await refreshWorkspace();
+        return changed;
+      },
+      async removeProjectIcon() {
+        const changed = await scope().removeIcon();
+        setProject(changed);
+        await refreshWorkspace();
+        return changed;
+      },
       async addMember(input) {
         const member = await scope().addMember(input);
         await refreshProject();

package/src/i18n/en.ts

@@ -43,7 +43,7 @@ export const en = {
       private: "Only those listed",
     } satisfies Record<ProjectVisibility, string>,
     runStatus: {
-      running: "At work",
+      running: "Open",
       waiting: "Waiting for a decision",
       finished: "Finished",
       failed: "Failed",
@@ -95,6 +95,7 @@ export const en = {
     nobody: "Nobody",
     nothing: "Nothing",
     language: "Language",
+    showMore: (n: number, of: number) => `Show ${n} more of ${of}`,
   },
 
   nav: {
@@ -121,7 +122,7 @@ export const en = {
     live: "Live",
     reconnecting: "Reconnecting",
     signOut: "Sign out",
-    menu: (login: string) => `${login}: menu`,
+    menu: (name: string) => `${name}: menu`,
   },
 
   signIn: {
@@ -150,7 +151,6 @@ export const en = {
     list: "Projects",
     private: "Private",
     decisionsWaiting: (n: number) => `${count(n, "decision", "decisions")} waiting`,
-    agentsAtWork: (n: number) => `${count(n, "agent", "agents")} at work`,
     form: {
       aria: "New project",
       name: "Name",
@@ -162,6 +162,11 @@ export const en = {
       whoIsMember: "Who is a member",
       skillsAddress: "Skills address",
       skillsAddressPlaceholder: "/gh/<owner>/<repo>, or empty for the organization's",
+      symbol: "Mark",
+      image: "Image",
+      imageRemove: "Remove the image",
+      color: "Colour",
+      colorAuto: "Chosen from the key",
       make: "Make the project",
     },
     members: {
@@ -173,7 +178,7 @@ export const en = {
       leadRoles:
         "An owner configures the project; a member works on it. A workspace administrator is an owner of every project.",
       since: "since",
-      roleOf: (login: string) => `Role of ${login}`,
+      roleOf: (name: string) => `Role of ${name}`,
       addAria: "Add a member",
       person: "Person",
       chooseSomeone: "Choose someone",
@@ -207,9 +212,6 @@ export const en = {
     moveTo: "Move to",
     decisions: (n: number) => count(n, "decision", "decisions"),
     decisionsTitle: "Decisions waiting for a person",
-    agentAtWork: "agent at work",
-    agentAtWorkTitle: "An agent is at work on it",
-    agentSince: (agent: string, since: string) => `${agent}, at work since ${since}`,
     filters: {
       aria: "Narrow the board",
       everyone: "Everyone",
@@ -247,7 +249,6 @@ export const en = {
     raiseDecision: "Raise a decision",
     nothingMore: "Nothing more was written about it.",
     links: "Links",
-    agentsAtWork: "Agents at work",
     runs: "Runs",
     decisions: "Decisions",
     history: "What happened",
@@ -336,8 +337,10 @@ export const en = {
 
   calendar: {
     title: "Calendar",
-    lead: "The tasks by the day they are due. A task with a start is shown from it; one with no day waits at the bottom to be given one.",
+    lead: "The tasks on their days: planned from a start to a due day, a task lies across them; due on a day alone, it sits on it. One with no day waits at the bottom to be given one.",
     grid: "The month",
+    legend: { title: "Category colours" },
+    startsOnly: "Starts that day, with no due day yet",
     previous: "The month before",
     next: "The month after",
     thisMonth: "This month",
@@ -346,7 +349,6 @@ export const en = {
     nothingOverdue: "Nothing is overdue.",
     unscheduled: "No day set",
     allScheduled: "Every open task has a day.",
-    starts: "starts",
     workload: {
       title: "Who has what",
       lead: "The open tasks of each person, and what of them is late or due within the week.",
@@ -509,6 +511,7 @@ export const en = {
       runReported: (task: string, excerpt: string | undefined) =>
         `reported on ${task}${excerpt === undefined ? "" : `: ${excerpt}`}`,
       runHandedIn: (label: string, task: string) => `handed in ${label} on ${task}`,
+      runTakenOver: (task: string, agent: string) => `took over ${task} from ${agent}`,
       runFinished: (task: string) => `finished ${task}`,
       runFailed: (task: string) => `failed on ${task}`,
       runAbandoned: (task: string) => `gave up on ${task}`,
@@ -524,12 +527,13 @@ export const en = {
     for: "for",
     since: "since",
     until: "until",
+    lastHeard: "last heard",
     markAbandoned: "Mark abandoned",
     waitingForDecision: "Waiting for a decision",
     answerIt: "answer it",
     reports: "Reports",
     handedIn: "Handed in",
-    label: (agent: string, login: string) => `${agent} for ${login}`,
+    label: (agent: string, name: string) => `${agent} for ${name}`,
   },
 
   skills: {
@@ -621,9 +625,9 @@ export const en = {
     title: "People",
     list: "People",
     lead: "Everyone who has signed in. An administrator configures the workspace and says what each person is; a member works in the projects they are in. What a person may do, their agents may do.",
-    roleOf: (login: string) => `Role of ${login}`,
+    roleOf: (name: string) => `Role of ${name}`,
     agents: "Agents",
-    agentsOf: (login: string) => `Agents of ${login}`,
+    agentsOf: (name: string) => `Agents of ${name}`,
     agentsLead: (name: string) =>
       `What works here as ${name}, each with a token of its own. Disconnecting one takes its token away at once.`,
     loadingAgents: "Loading the agents",
@@ -707,7 +711,8 @@ export const en = {
     words: {
       title: "Connecting an agent",
       tellYourAgent: "Tell your agent, in its own chat:",
-      quote: (origin: string) => `Install the console command and connect to ${origin}.`,
+      quote: (origin: string) =>
+        `Install @skillcdn/console from npm, run console login --url ${origin}, and tell me the address and the code it shows.`,
       doesTheRest:
         "An agent that can run commands does the rest: it installs the command, connects, and shows you an address with a code.",
       thenApprove:

package/src/i18n/ko.ts

@@ -21,7 +21,7 @@ export const ko: Messages = {
     projectRole: { owner: "소유자", member: "멤버" },
     visibility: { workspace: "워크스페이스의 모두", private: "목록에 있는 사람만" },
     runStatus: {
-      running: "작업 중",
+      running: "열림",
       waiting: "결정 대기 중",
       finished: "완료",
       failed: "실패",
@@ -68,6 +68,7 @@ export const ko: Messages = {
     nobody: "없음",
     nothing: "없음",
     language: "언어",
+    showMore: (n, of) => `${of}개 중 ${n}개 더 보기`,
   },
 
   nav: {
@@ -94,7 +95,7 @@ export const ko: Messages = {
     live: "실시간",
     reconnecting: "다시 연결하는 중",
     signOut: "로그아웃",
-    menu: (login) => `${login}: 메뉴`,
+    menu: (name) => `${name}: 메뉴`,
   },
 
   signIn: {
@@ -123,7 +124,6 @@ export const ko: Messages = {
     list: "프로젝트",
     private: "비공개",
     decisionsWaiting: (n) => `결정 ${n}건 대기 중`,
-    agentsAtWork: (n) => `에이전트 ${n}개 작업 중`,
     form: {
       aria: "새 프로젝트",
       name: "이름",
@@ -134,6 +134,11 @@ export const ko: Messages = {
       whoIsMember: "멤버 범위",
       skillsAddress: "스킬 주소",
       skillsAddressPlaceholder: "/gh/<owner>/<repo>, 비우면 조직의 스킬",
+      symbol: "마크",
+      image: "이미지",
+      imageRemove: "이미지 지우기",
+      color: "색",
+      colorAuto: "키에서 정해진 색",
       make: "프로젝트 만들기",
     },
     members: {
@@ -145,7 +150,7 @@ export const ko: Messages = {
       leadRoles:
         "소유자는 프로젝트를 설정하고, 멤버는 프로젝트에서 일합니다. 워크스페이스 관리자는 모든 프로젝트의 소유자입니다.",
       since: "부터",
-      roleOf: (login) => `${login}의 역할`,
+      roleOf: (name) => `${name}의 역할`,
       addAria: "멤버 추가",
       person: "사람",
       chooseSomeone: "선택하세요",
@@ -179,9 +184,6 @@ export const ko: Messages = {
     moveTo: "이동",
     decisions: (n) => `결정 ${n}건`,
     decisionsTitle: "사람을 기다리는 결정",
-    agentAtWork: "에이전트 작업 중",
-    agentAtWorkTitle: "에이전트가 이 작업을 하고 있습니다",
-    agentSince: (agent, since) => `${agent}, ${since}부터 작업 중`,
     filters: {
       aria: "보드 좁혀 보기",
       everyone: "모두",
@@ -219,7 +221,6 @@ export const ko: Messages = {
     raiseDecision: "결정 요청",
     nothingMore: "더 적힌 내용이 없습니다.",
     links: "링크",
-    agentsAtWork: "작업 중인 에이전트",
     runs: "실행",
     decisions: "결정",
     history: "일어난 일",
@@ -308,8 +309,10 @@ export const ko: Messages = {
 
   calendar: {
     title: "캘린더",
-    lead: "작업을 기한일에 놓고 봅니다. 시작일이 있는 작업은 그날부터 보이고, 날짜가 없는 작업은 아래에서 날짜를 기다립니다.",
+    lead: "작업을 날짜 위에 놓고 봅니다. 시작일과 기한이 있는 작업은 그 기간에 걸쳐 놓이고, 기한만 있는 작업은 그날에 놓입니다. 날짜가 없는 작업은 아래에서 날짜를 기다립니다.",
     grid: "이 달",
+    legend: { title: "카테고리 색" },
+    startsOnly: "그날 시작, 기한은 아직 없음",
     previous: "이전 달",
     next: "다음 달",
     thisMonth: "이번 달",
@@ -318,7 +321,6 @@ export const ko: Messages = {
     nothingOverdue: "기한이 지난 작업이 없습니다.",
     unscheduled: "날짜 없음",
     allScheduled: "열린 작업마다 날짜가 있습니다.",
-    starts: "시작",
     workload: {
       title: "누가 무엇을",
       lead: "사람마다 열린 작업과, 그중 늦은 것과 일주일 안에 마감인 것.",
@@ -477,6 +479,7 @@ export const ko: Messages = {
       runReported: (task, excerpt) =>
         `${task}에 보고했습니다${excerpt === undefined ? "" : `: ${excerpt}`}`,
       runHandedIn: (label, task) => `${task}에 ${label}을(를) 제출했습니다`,
+      runTakenOver: (task, agent) => `${agent}에게서 ${task}을(를) 넘겨받았습니다`,
       runFinished: (task) => `${task}을(를) 끝냈습니다`,
       runFailed: (task) => `${task}에 실패했습니다`,
       runAbandoned: (task) => `${task}을(를) 포기했습니다`,
@@ -492,12 +495,13 @@ export const ko: Messages = {
     for: "대신:",
     since: "시작",
     until: "종료",
+    lastHeard: "마지막 소식",
     markAbandoned: "중단됨으로 표시",
     waitingForDecision: "결정을 기다리는 중",
     answerIt: "답변하기",
     reports: "보고",
     handedIn: "제출물",
-    label: (agent, login) => `${login}을(를) 위한 ${agent}`,
+    label: (agent, name) => `${name}을(를) 위한 ${agent}`,
   },
 
   skills: {
@@ -589,9 +593,9 @@ export const ko: Messages = {
     title: "사람들",
     list: "사람들",
     lead: "로그인한 모든 사람. 관리자는 워크스페이스를 설정하고 각 사람의 역할을 정합니다. 멤버는 속한 프로젝트에서 일합니다. 사람이 할 수 있는 일은 그 사람의 에이전트도 할 수 있습니다.",
-    roleOf: (login) => `${login}의 역할`,
+    roleOf: (name) => `${name}의 역할`,
     agents: "에이전트",
-    agentsOf: (login) => `${login}의 에이전트`,
+    agentsOf: (name) => `${name}의 에이전트`,
     agentsLead: (name) =>
       `${name}(으)로 여기서 일하는 것들입니다. 각각 고유한 토큰을 가집니다. 연결을 끊으면 토큰이 즉시 사라집니다.`,
     loadingAgents: "에이전트를 불러오는 중",
@@ -674,7 +678,8 @@ export const ko: Messages = {
     words: {
       title: "에이전트 연결하기",
       tellYourAgent: "에이전트의 대화창에서 이렇게 말하세요:",
-      quote: (origin) => `콘솔 명령을 설치하고 ${origin}에 연결해.`,
+      quote: (origin) =>
+        `npm으로 @skillcdn/console을 설치하고, console login --url ${origin} 을 실행한 뒤 나오는 주소와 코드를 알려줘.`,
       doesTheRest:
         "명령을 실행할 수 있는 에이전트는 나머지를 알아서 합니다. 명령을 설치하고, 연결하고, 코드가 있는 주소를 보여 줍니다.",
       thenApprove: