@skillcdn/console 0.1.11 → 0.1.12

package/src/components/people.tsx

@@ -1,7 +1,7 @@
 import type { PersonRole, RestPerson } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { PERSON_ROLES } from "../vocabulary.js";
-import { PersonChip, RoleBadge } from "./ui.js";
+import { PersonChip, personName, RoleBadge } from "./ui.js";
 
 // The people of the board, with what each may do. An administrator changes roles here; a
 // member reads. Takes its data as props and nothing from the network.
@@ -24,15 +24,15 @@ export function PeopleList(props: PeopleListProps) {
       {props.people.map((person) => (
         <li key={person.id} className="sc-person-row">
           <PersonChip person={person} size="md" />
-          <span className="sc-person-name">
-            {person.name ?? ""}
-            {props.me?.id === person.id && <span className="sc-muted"> {words.common.you}</span>}
+          <span className="sc-person-name sc-muted">
+            {person.name === null ? "" : person.login}
+            {props.me?.id === person.id && <span> {words.common.you}</span>}
           </span>
           {props.onChangeRole === undefined ? (
             <RoleBadge role={person.role} />
           ) : (
             <label className="sc-field sc-field-inline">
-              <span className="sc-visually-hidden">{words.people.roleOf(person.login)}</span>
+              <span className="sc-visually-hidden">{words.people.roleOf(personName(person))}</span>
               <select
                 className="sc-input"
                 value={person.role}

package/src/components/projects.tsx

@@ -23,7 +23,7 @@ import {
   type RestProjectPatch,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Badge, Button, cx, PersonChip, Time } from "./ui.js";
+import { Badge, Button, cx, PersonChip, personName, Time } from "./ui.js";
 
 /** A project's mark: its symbol on its colour, so that projects tell apart at a glance. */
 export function ProjectMark(props: {
@@ -392,7 +392,9 @@ export function MemberList(props: MemberListProps) {
                 <ProjectRoleBadge role={member.role} />
               ) : (
                 <label className="sc-field sc-field-inline">
-                  <span className="sc-visually-hidden">{members.roleOf(member.person.login)}</span>
+                  <span className="sc-visually-hidden">
+                    {members.roleOf(personName(member.person))}
+                  </span>
                   <select
                     className="sc-input"
                     value={member.role}
@@ -446,7 +448,7 @@ export function MemberList(props: MemberListProps) {
                 <option value="">{members.chooseSomeone}</option>
                 {candidates.map((person) => (
                   <option key={person.id} value={person.id}>
-                    {person.login}
+                    {personName(person)}
                   </option>
                 ))}
               </select>

package/src/components/runs.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import type { RestArtifact, RestRun, RunStatus } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { Markdown } from "./markdown.js";
-import { Badge, Button, formatBytes, PersonChip, Time } from "./ui.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.
@@ -49,7 +49,7 @@ export function RunCard(props: RunCardProps) {
   const { run } = props;
   const open = run.status === "running" || run.status === "waiting";
   return (
-    <article className="sc-run" aria-label={words.label(run.agent, run.person.login)}>
+    <article className="sc-run" aria-label={words.label(run.agent, personName(run.person))}>
       <header className="sc-run-header">
         <span className="sc-run-agent">{run.agent}</span>
         <RunStatusBadge status={run.status} />

package/src/components/shell.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode, useEffect, useRef } from "react";
 import type { RestPerson } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Avatar, cx } from "./ui.js";
+import { Avatar, cx, personName } from "./ui.js";
 
 // The frame every page sits in (ADR-0010): a header that names the workspace and the project the
 // page is on, with the person's menu at its end; a row of tabs below it with the pages of the
@@ -109,9 +109,9 @@ function PersonMenu(props: {
   const { person } = props;
   return (
     <details className="sc-menu" ref={details}>
-      <summary className="sc-menu-summary" aria-label={words.shell.menu(person.login)}>
+      <summary className="sc-menu-summary" aria-label={words.shell.menu(personName(person))}>
         <Avatar person={person} size="sm" />
-        <span className="sc-person-login">{person.login}</span>
+        <span className="sc-person-login">{personName(person)}</span>
         <svg className="sc-menu-caret" viewBox="0 0 16 16" aria-hidden="true">
           <path
             d="M4 6l4 4 4-4"

package/src/components/task-form.tsx

@@ -14,7 +14,7 @@ import {
   TASK_STATES,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Button } from "./ui.js";
+import { Button, personName } from "./ui.js";
 
 // Writing a task, or changing one. The bounds are the package's, said before a request is made.
 // The plan is two days (ADR-0019); what happened to the task is the board's to keep, not a
@@ -151,7 +151,7 @@ export function TaskForm(props: TaskFormProps) {
             <option value="">{words.common.nobody}</option>
             {props.people.map((person) => (
               <option key={person.id} value={person.id}>
-                {person.login}
+                {personName(person)}
               </option>
             ))}
           </select>

package/src/components/ui.tsx

@@ -74,13 +74,22 @@ export function Callout(props: {
   );
 }
 
+/** What a person is called on the pages: the name the host gives, or the login where there is none. */
+export function personName(person: {
+  readonly login: string;
+  readonly name: string | null;
+}): string {
+  const name = person.name?.trim() ?? "";
+  return name === "" ? person.login : name;
+}
+
 /**
  * A person's picture as the git host serves it: loaded lazily, without a referrer, and gone as
- * a whole when there is none or it cannot be loaded, leaving the initial of the login instead.
+ * a whole when there is none or it cannot be loaded, leaving the initial of the name instead.
  */
 export function Avatar(props: { readonly person: RestPerson; readonly size?: "sm" | "md" | "lg" }) {
   const size = props.size ?? "md";
-  const initial = props.person.login.slice(0, 1).toUpperCase();
+  const initial = personName(props.person).slice(0, 1).toUpperCase();
   if (props.person.avatar === null) {
     return (
       <span
@@ -103,12 +112,12 @@ export function Avatar(props: { readonly person: RestPerson; readonly size?: "sm
   );
 }
 
-/** A person, as a picture and a name, wherever one is named. */
+/** A person, as a picture and their name, wherever one is named; the login is there on hover. */
 export function PersonChip(props: { readonly person: RestPerson; readonly size?: "sm" | "md" }) {
   return (
-    <span className="sc-person" title={props.person.name ?? props.person.login}>
+    <span className="sc-person" title={props.person.login}>
       <Avatar person={props.person} size={props.size ?? "sm"} />
-      <span className="sc-person-login">{props.person.login}</span>
+      <span className="sc-person-login">{personName(props.person)}</span>
     </span>
   );
 }

package/src/console.tsx

@@ -1,4 +1,12 @@
-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,
@@ -50,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";
@@ -61,11 +69,13 @@ import {
   DEFAULT_LANGUAGES,
   LanguageContext,
   type LanguagePack,
+  type Messages,
   useWords,
 } from "./i18n/index.js";
 import {
   boardHref,
   calendarHref,
+  customPageHref,
   decisionHref,
   docHref,
   goalHref,
@@ -128,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;
@@ -141,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 {
@@ -1047,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">
@@ -1259,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);
@@ -1363,6 +1424,16 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
           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
@@ -1423,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">
@@ -1442,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
@@ -1465,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
@@ -1507,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/i18n/en.ts

@@ -122,7 +122,7 @@ export const en = {
     live: "Live",
     reconnecting: "Reconnecting",
     signOut: "Sign out",
-    menu: (login: string) => `${login}: menu`,
+    menu: (name: string) => `${name}: menu`,
   },
 
   signIn: {
@@ -178,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",
@@ -533,7 +533,7 @@ export const en = {
     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: {
@@ -625,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",
@@ -711,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

@@ -95,7 +95,7 @@ export const ko: Messages = {
     live: "실시간",
     reconnecting: "다시 연결하는 중",
     signOut: "로그아웃",
-    menu: (login) => `${login}: 메뉴`,
+    menu: (name) => `${name}: 메뉴`,
   },
 
   signIn: {
@@ -150,7 +150,7 @@ export const ko: Messages = {
       leadRoles:
         "소유자는 프로젝트를 설정하고, 멤버는 프로젝트에서 일합니다. 워크스페이스 관리자는 모든 프로젝트의 소유자입니다.",
       since: "부터",
-      roleOf: (login) => `${login}의 역할`,
+      roleOf: (name) => `${name}의 역할`,
       addAria: "멤버 추가",
       person: "사람",
       chooseSomeone: "선택하세요",
@@ -501,7 +501,7 @@ export const ko: Messages = {
     answerIt: "답변하기",
     reports: "보고",
     handedIn: "제출물",
-    label: (agent, login) => `${login}을(를) 위한 ${agent}`,
+    label: (agent, name) => `${name}을(를) 위한 ${agent}`,
   },
 
   skills: {
@@ -593,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: "에이전트를 불러오는 중",
@@ -678,7 +678,8 @@ export const ko: Messages = {
     words: {
       title: "에이전트 연결하기",
       tellYourAgent: "에이전트의 대화창에서 이렇게 말하세요:",
-      quote: (origin) => `콘솔 명령을 설치하고 ${origin}에 연결해.`,
+      quote: (origin) =>
+        `npm으로 @skillcdn/console을 설치하고, console login --url ${origin} 을 실행한 뒤 나오는 주소와 코드를 알려줘.`,
       doesTheRest:
         "명령을 실행할 수 있는 에이전트는 나머지를 알아서 합니다. 명령을 설치하고, 연결하고, 코드가 있는 주소를 보여 줍니다.",
       thenApprove:

package/src/index.ts

@@ -127,6 +127,7 @@ export {
   PRIORITY_LABELS,
   PriorityBadge,
   ProgressBar,
+  personName,
   ROLE_LABELS,
   RoleBadge,
   Spinner,
@@ -140,7 +141,10 @@ export {
   type ConsoleApp,
   type ConsoleComponents,
   type ConsoleConfig,
+  type CustomPage,
+  type CustomPageContext,
   createConsole,
+  customPageLabel,
   DEFAULT_COMPONENTS,
 } from "./console.js";
 export { type ConsoleActions, type ConsoleData, useConsoleData } from "./data.js";
@@ -180,6 +184,7 @@ export {
   boardHref,
   calendarHref,
   connectHref,
+  customPageHref,
   type DocsView,
   decisionHref,
   docHref,

package/src/router.ts

@@ -84,6 +84,14 @@ export type Route =
   | { readonly name: "connect"; readonly code: string | undefined }
   /** An address that moved: the page takes the person to `to` in its place. */
   | { readonly name: "moved"; readonly to: string }
+  /** A page a console adds of its own (`createConsole({ pages })`): on the workspace, or on a project. */
+  | { readonly name: "custom"; readonly level: "workspace"; readonly page: string }
+  | {
+      readonly name: "custom";
+      readonly level: "project";
+      readonly project: string;
+      readonly page: string;
+    }
   | { readonly name: "not-found" };
 
 /** The pages of a project, after its key. */
@@ -112,6 +120,8 @@ export const PATHS = {
   newToken: "/agents/new",
   /** The categories tasks are sorted into, kept by an administrator. */
   categories: "/categories",
+  /** Where the pages a console adds of its own are: `/pages/<key>`, and `/projects/<key>/pages/<page>` on a project. */
+  pages: "/pages",
   /** Where an agent's connection is approved (ADR-0011): `/connect/<code>`, or the code typed. */
   connect: "/connect",
 } as const;
@@ -223,6 +233,12 @@ export function matchRoute(pathname: string, search = ""): Route {
       ? { name: "person-agents", id }
       : NOT_FOUND;
   }
+  if (path.startsWith(`${PATHS.pages}/`)) {
+    const [page, ...more] = path.slice(PATHS.pages.length + 1).split("/");
+    return page !== undefined && PROJECT_KEY.test(page) && more.length === 0
+      ? { name: "custom", level: "workspace", page }
+      : NOT_FOUND;
+  }
   if (!path.startsWith(`${PATHS.project}/`)) {
     return NOT_FOUND;
   }
@@ -242,6 +258,11 @@ export function matchRoute(pathname: string, search = ""): Route {
     const view = docsViewOf(params, docPath);
     return view === undefined ? NOT_FOUND : { name: "docs", project, path: docPath, view };
   }
+  if (page === "pages") {
+    return third !== undefined && PROJECT_KEY.test(third) && rest.length === 0
+      ? { name: "custom", level: "project", project, page: third }
+      : NOT_FOUND;
+  }
   if (rest.length > 0) {
     return NOT_FOUND;
   }
@@ -363,6 +384,11 @@ export function calendarHref(key: string, month?: string, filter: BoardFilter =
   return parts.length === 0 ? base : `${base}?${parts.join("&")}`;
 }
 
+/** Where a page a console adds of its own is: on the workspace, or on a project when its key is given. */
+export function customPageHref(page: string, project?: string): string {
+  return project === undefined ? `${PATHS.pages}/${page}` : `${projectHref(project)}/pages/${page}`;
+}
+
 /** Where a goal is set: the form. */
 export function newGoalHref(key: string): string {
   return `${PATHS.project}/${key}/roadmap/new`;