@skillcdn/console 0.1.11 → 0.1.13

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 {
@@ -274,13 +332,12 @@ function holdsToken(data: ConsoleData): boolean {
 }
 
 /**
- * The pages a console that holds a token does not offer: the tokens themselves and
- * configuring, which are a person's own doing on the console's own pages, signed in.
+ * The pages a console that holds a token does not offer: the tokens themselves, and the
+ * approval of an agent's connection, which makes one; a person's own doing on the console's
+ * own pages, signed in. Everything else a person may do, their agent may (ADR-0021).
  */
 export function onlyOnOwnPages(route: Route): boolean {
   return (
-    route.name === "new-project" ||
-    route.name === "settings" ||
     route.name === "agents" ||
     route.name === "new-token" ||
     route.name === "person-agents" ||
@@ -293,28 +350,6 @@ function NotWithToken() {
   return <EmptyState title={words.title} body={words.body} />;
 }
 
-/**
- * Where a console that holds a token keeps the person's choice of language: the browser's own
- * storage, which may be absent or refuse, and then the browser's languages decide.
- */
-const LANGUAGE_KEY = "sc-language";
-
-function storedLanguage(): string | undefined {
-  try {
-    return globalThis.localStorage?.getItem(LANGUAGE_KEY) ?? undefined;
-  } catch {
-    return undefined;
-  }
-}
-
-function storeLanguage(tag: string): void {
-  try {
-    globalThis.localStorage?.setItem(LANGUAGE_KEY, tag);
-  } catch {
-    // A browser that keeps nothing: the choice holds for this page.
-  }
-}
-
 /** A link that reads as a button: where a form is, for instance. */
 function LinkButton(props: {
   readonly href: string;
@@ -339,12 +374,11 @@ function ProjectsPage(props: {
   const { data, components, navigation, making } = props;
   const { busy, error, act } = useAction();
   const href = (project: RestProject) => projectHref(project.key);
-  const configures = !holdsToken(data);
   return (
     <>
       <div className="sc-page-head">
         <h1 className="sc-page-title">{words.title}</h1>
-        {!making && configures && (
+        {!making && (
           <LinkButton href={PATHS.newProject} variant="primary">
             {words.newProject}
           </LinkButton>
@@ -377,11 +411,7 @@ function ProjectsPage(props: {
           <EmptyState
             title={words.empty.title}
             body={words.empty.body}
-            action={
-              configures ? (
-                <LinkButton href={PATHS.newProject}>{words.newProject}</LinkButton>
-              ) : undefined
-            }
+            action={<LinkButton href={PATHS.newProject}>{words.newProject}</LinkButton>}
           />
         }
       />
@@ -908,7 +938,7 @@ function ProjectPage(props: {
   }
   if (route.name === "members") {
     const me = data.me?.person ?? undefined;
-    const configures = owner && !holdsToken(data);
+    const configures = owner;
     const members = words.projects.members;
     return (
       <>
@@ -1047,7 +1077,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">
@@ -1140,7 +1172,7 @@ function WorkspacePage(props: {
   }
   if (route.name === "categories") {
     const me = data.me?.person ?? undefined;
-    const administrator = me?.role === "admin" && !holdsToken(data);
+    const administrator = me?.role === "admin";
     const categories = words.categories;
     return (
       <>
@@ -1179,7 +1211,7 @@ function WorkspacePage(props: {
 
   if (route.name === "people") {
     const me = data.me?.person ?? undefined;
-    const administrator = me?.role === "admin" && !holdsToken(data);
+    const administrator = me?.role === "admin";
     return (
       <>
         <div className="sc-page-head">
@@ -1259,6 +1291,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);
@@ -1273,10 +1306,7 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
     const title = data.me?.workspace.name ?? fallbackTitle;
     const viaToken = holdsToken(data);
     // The language: the person's choice, else the browser's, else the first the console speaks.
-    // A console that holds a token cannot keep the choice on the person, and keeps it in the
-    // browser instead.
-    const [ownChoice, setOwnChoice] = useState<string | undefined>(storedLanguage);
-    const chosen = viaToken ? (ownChoice ?? data.me?.language) : data.me?.language;
+    const chosen = data.me?.language;
     const pack = useMemo(
       () =>
         chooseLanguage(
@@ -1363,6 +1393,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
@@ -1414,7 +1454,7 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
                 label: words.nav.members,
                 current: route.name === "members",
               },
-              ...(project?.role === "owner" && !viaToken
+              ...(project?.role === "owner"
                 ? [
                     {
                       href: projectHref(projectKey, "settings"),
@@ -1423,8 +1463,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 +1501,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 +1526,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
@@ -1497,17 +1560,15 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
             label: candidate.label,
             current: candidate.tag === pack.tag,
           }))}
-          onLanguage={(tag) => {
-            if (viaToken) {
-              storeLanguage(tag);
-              setOwnChoice(tag);
-            } else {
-              void data.actions.updateMe({ language: tag }).catch(() => undefined);
-            }
-          }}
+          onLanguage={(tag) => void data.actions.updateMe({ language: tag }).catch(() => undefined)}
           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

@@ -89,7 +89,7 @@ export const en = {
     },
     notWithToken: {
       title: "Done on the console's own pages",
-      body: "This console holds a token, which acts as you on the board. Connecting agents, configuring projects and people, and keeping a language are done on the organization's console, signed in.",
+      body: "This console holds a token, which acts as you on the board, configuring included. Agents are connected, and tokens made and removed, on the organization's console, signed in.",
     },
     you: "(you)",
     nobody: "Nobody",
@@ -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",
@@ -684,7 +684,7 @@ export const en = {
     lookingUp: "Looking the code up",
     notACode: "That is not a code: eight letters and digits, in two groups.",
     noSuchCode:
-      "No agent asks to connect with this code. A code is good for ten minutes and for one approval; ask your agent for a new one.",
+      "No agent asks to connect with this code. A code is good for thirty minutes and for one approval; ask your agent for a new one.",
     couldNotAsk: "The console could not be asked.",
     asks: {
       title: "An agent asks to connect as you",
@@ -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

@@ -62,7 +62,7 @@ export const ko: Messages = {
     },
     notWithToken: {
       title: "콘솔 자체 페이지에서 하는 일입니다",
-      body: "이 콘솔은 토큰으로 당신을 대신해 보드를 씁니다. 에이전트 연결, 프로젝트와 사람 설정, 언어 저장은 조직 콘솔에 로그인해서 합니다.",
+      body: "이 콘솔은 토큰으로 당신을 대신해 보드를 쓰며, 설정도 그렇게 합니다. 에이전트 연결과 토큰 관리는 조직 콘솔에 로그인해서 합니다.",
     },
     you: "(나)",
     nobody: "없음",
@@ -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: "에이전트를 불러오는 중",
@@ -652,7 +652,7 @@ export const ko: Messages = {
     lookingUp: "코드를 찾는 중",
     notACode: "코드가 아닙니다. 영문자와 숫자 여덟 자, 두 묶음입니다.",
     noSuchCode:
-      "이 코드로 연결을 요청한 에이전트가 없습니다. 코드는 10분 동안, 한 번의 승인에만 유효합니다. 에이전트에게 새 코드를 요청하세요.",
+      "이 코드로 연결을 요청한 에이전트가 없습니다. 코드는 30분 동안, 한 번의 승인에만 유효합니다. 에이전트에게 새 코드를 요청하세요.",
     couldNotAsk: "콘솔에 물어볼 수 없습니다.",
     asks: {
       title: "에이전트가 나로서 연결하기를 요청합니다",
@@ -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`;