@skillcdn/console 0.1.3 → 0.1.5

package/dist/console.js

@@ -3,21 +3,24 @@ import { StrictMode, useCallback, useEffect, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { createClient, } from "./api.js";
 import { Board } from "./components/board.js";
+import { ConnectWords } from "./components/connect.js";
 import { DecisionForm } from "./components/decision-form.js";
-import { DecisionList } from "./components/decision-list.js";
+import { DecisionCard, DecisionList } from "./components/decision-list.js";
 import { EventFeed } from "./components/event-feed.js";
 import { PeopleList } from "./components/people.js";
 import { MemberList, ProjectForm, ProjectList, } from "./components/projects.js";
-import { Shell } from "./components/shell.js";
+import { isPlainClick, Shell, } from "./components/shell.js";
 import { SignIn } from "./components/sign-in.js";
 import { SkillList } from "./components/skills.js";
 import { TaskForm } from "./components/task-form.js";
 import { TaskView } from "./components/task-view.js";
 import { NewToken, TokenForm, TokenList } from "./components/tokens.js";
 import { Button, Callout, EmptyState, Spinner } from "./components/ui.js";
+import { ConnectPage } from "./connect-page.js";
 import { useConsoleData } from "./data.js";
 import { DocsPage } from "./docs-page.js";
-import { docHref, matchRoute, PATHS, projectHref, signInFailureOf, taskHref, withoutSignInParam, } from "./router.js";
+import { chooseLanguage, DEFAULT_LANGUAGES, LanguageContext, useWords, } from "./i18n/index.js";
+import { decisionHref, docHref, matchRoute, newDecisionHref, newTaskHref, PATHS, personAgentsHref, projectHref, signInFailureOf, taskHref, withoutSignInParam, } from "./router.js";
 import { projectPath } from "./routes.js";
 import { useAction } from "./use-action.js";
 export const DEFAULT_COMPONENTS = {
@@ -33,8 +36,21 @@ export const DEFAULT_COMPONENTS = {
     ProjectList,
     MemberList,
 };
-/** The browser's location, as the app reads it; a given path while rendering elsewhere. */
-function useLocation(initialPath) {
+/** How many steps back from a history entry stay within the app: kept on the entry itself. */
+function depthOf(state) {
+    return typeof state === "object" &&
+        state !== null &&
+        "scDepth" in state &&
+        typeof state.scDepth === "number"
+        ? state.scDepth
+        : 0;
+}
+/**
+ * The browser's location as the app reads it, and the ways to move: one history entry per step
+ * the person takes, none for the same address again, a replacement for a redirect or for what a
+ * form made, and back to where a form was opened from when that is within the app.
+ */
+function useNavigation(initialPath) {
     const read = useCallback(() => typeof window === "undefined"
         ? { pathname: initialPath ?? "/", search: "" }
         : { pathname: window.location.pathname, search: window.location.search }, [initialPath]);
@@ -44,44 +60,125 @@ function useLocation(initialPath) {
         window.addEventListener("popstate", update);
         return () => window.removeEventListener("popstate", update);
     }, [read]);
-    const navigate = useCallback((href, replace = false) => {
-        if (typeof window === "undefined") {
+    const navigation = useMemo(() => {
+        const show = (href, replace) => {
+            if (typeof window === "undefined") {
+                return;
+            }
+            const { pathname, search, hash } = window.location;
+            if (href === `${pathname}${search}${hash}`) {
+                return;
+            }
+            const depth = depthOf(window.history.state);
+            if (replace) {
+                window.history.replaceState({ scDepth: depth }, "", href);
+            }
+            else {
+                window.history.pushState({ scDepth: depth + 1 }, "", href);
+                window.scrollTo({ top: 0, left: 0, behavior: "instant" });
+            }
+            setLocation(read());
+        };
+        return {
+            go: (href) => show(href, false),
+            replace: (href) => show(href, true),
+            back: (fallback) => {
+                if (typeof window !== "undefined" && depthOf(window.history.state) > 0) {
+                    window.history.back();
+                }
+                else {
+                    show(fallback, true);
+                }
+            },
+        };
+    }, [read]);
+    return { location, navigation };
+}
+/**
+ * Every plain click on a link to one of the console's own addresses is followed in place, from
+ * here, wherever the link is: in a document, in a feed line, in a task. A modified click, a link
+ * elsewhere, a file of the API, a sign-in, and a jump within the page stay the browser's.
+ */
+function useFollowLinks(navigation) {
+    useEffect(() => {
+        if (typeof document === "undefined") {
             return;
         }
-        if (replace) {
-            window.history.replaceState(null, "", href);
-        }
-        else {
-            window.history.pushState(null, "", href);
-            window.scrollTo({ top: 0, left: 0, behavior: "instant" });
-        }
-        setLocation(read());
-    }, [read]);
-    return { location, navigate };
+        const onClick = (event) => {
+            if (event.defaultPrevented || !isPlainClick(event)) {
+                return;
+            }
+            const anchor = event.target instanceof Element ? event.target.closest("a[href]") : null;
+            if (!(anchor instanceof HTMLAnchorElement)) {
+                return;
+            }
+            if ((anchor.target !== "" && anchor.target !== "_self") || anchor.hasAttribute("download")) {
+                return;
+            }
+            const url = new URL(anchor.href, window.location.href);
+            if (url.origin !== window.location.origin) {
+                return;
+            }
+            const { pathname, search } = window.location;
+            if (url.pathname === pathname && url.search === search && url.hash !== "") {
+                return;
+            }
+            if (matchRoute(url.pathname, url.search).name === "not-found") {
+                return;
+            }
+            event.preventDefault();
+            navigation.go(`${url.pathname}${url.search}${url.hash}`);
+        };
+        document.addEventListener("click", onClick);
+        return () => document.removeEventListener("click", onClick);
+    }, [navigation]);
 }
 /** The key of the project a route is on, or nothing. */
 const projectOf = (route) => "project" in route ? route.project : undefined;
+/** The field the pages lie on, for a page without the shell: signing in, and the wait before it. */
+function Ground(props) {
+    return (_jsx("div", { className: "sc-shell", children: _jsx("main", { className: "sc-main", children: props.children }) }));
+}
+/** A link that reads as a button: where a form is, for instance. */
+function LinkButton(props) {
+    return (_jsx("a", { className: `sc-button sc-button-${props.variant ?? "secondary"}`, href: props.href, children: props.children }));
+}
 function ProjectsPage(props) {
-    const { data, components, navigate } = props;
-    const [making, setMaking] = useState(false);
+    const words = useWords().projects;
+    const { data, components, navigation, making } = props;
     const { busy, error, act } = useAction();
     const href = (project) => projectHref(project.key);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsx("h1", { className: "sc-page-title", children: "Projects" }), _jsx(Button, { variant: "primary", onClick: () => setMaking(true), disabled: making, children: "New project" })] }), _jsx("p", { className: "sc-lead", children: "A project holds its board, its skills and its people. What you may see and change is decided per project: an owner configures it, a member works on it." }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), making && (_jsx("section", { className: "sc-panel", "aria-label": "New project", children: _jsx(ProjectForm, { busy: busy, onSubmit: (input) => void act(async () => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsx("h1", { className: "sc-page-title", children: words.title }), !making && (_jsx(LinkButton, { href: PATHS.newProject, variant: "primary", children: words.newProject }))] }), _jsx("p", { className: "sc-lead", children: words.lead }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), making && (_jsx("section", { className: "sc-panel sc-panel-form", "aria-label": words.form.aria, children: _jsx(ProjectForm, { busy: busy, onSubmit: (input) => void act(async () => {
                         const made = await data.actions.createProject(input);
-                        setMaking(false);
-                        navigate(projectHref(made.key));
-                    }), onCancel: () => setMaking(false) }) })), _jsx(components.ProjectList, { projects: data.projects, projectHref: href, onOpen: (project) => navigate(href(project)), empty: _jsx(EmptyState, { title: "No projects yet", body: "Make the first one: what it is for, and who is in it. Or ask an owner to add you to theirs.", action: _jsx(Button, { onClick: () => setMaking(true), children: "New project" }) }) })] }));
+                        navigation.replace(projectHref(made.key));
+                    }), onCancel: () => navigation.back(PATHS.projects) }) })), _jsx(components.ProjectList, { projects: data.projects, projectHref: href, onOpen: (project) => navigation.go(href(project)), empty: _jsx(EmptyState, { title: words.empty.title, body: words.empty.body, action: _jsx(LinkButton, { href: PATHS.newProject, children: words.newProject }) }) })] }));
 }
 function TaskPage(props) {
-    const { project, task, data, components, busy, error, act } = props;
+    const words = useWords();
+    const { route, project, data, components, navigation, busy, error, act } = props;
+    const key = project.key;
+    const task = route.number === undefined
+        ? data.tasks.find((candidate) => candidate.id === route.id)
+        : data.tasks.find((candidate) => candidate.number === route.number);
     const [history, setHistory] = useState(undefined);
     const { taskHistory } = data.actions;
+    const taskId = task?.id;
+    const number = task?.number;
+    // A task named by its id is shown at its number's address.
+    useEffect(() => {
+        if (route.id !== undefined && number !== undefined) {
+            navigation.replace(taskHref(key, number, route.form));
+        }
+    }, [route.id, route.form, number, key, navigation]);
     // Everything that happened to the task, asked for again whenever the project's feed grows.
     const feedLength = data.events.length;
     // biome-ignore lint/correctness/useExhaustiveDependencies: the feed's length is the trigger
     useEffect(() => {
+        if (taskId === undefined) {
+            return;
+        }
         const controller = new AbortController();
-        taskHistory(task.id, controller.signal)
+        taskHistory(taskId, controller.signal)
             .then((events) => {
             if (!controller.signal.aborted) {
                 setHistory(events);
@@ -89,183 +186,289 @@ function TaskPage(props) {
         })
             .catch(() => undefined);
         return () => controller.abort();
-    }, [task.id, taskHistory, feedLength]);
-    return (_jsx(components.TaskView, { task: task, people: data.people, tasks: data.tasks, decisions: data.decisions, runs: data.runs, history: history, taskHref: (candidate) => taskHref(project.key, candidate.id), decisionHref: () => projectHref(project.key, "decisions"), fileHref: (artifact) => projectPath(project.key, "files", artifact.id), docHref: (path) => docHref(project.key, path), busy: busy, error: error, onChange: (target, patch) => void act(() => data.actions.updateTask(target.id, patch)), onMove: (target, state) => void act(() => data.actions.updateTask(target.id, { state })), onRaiseDecision: (input) => void act(() => data.actions.raiseDecision(input)), onAnswer: (decision, input) => void act(() => data.actions.answerDecision(decision.id, input)), onUpdateDecision: (decision, patch) => void act(() => data.actions.updateDecision(decision.id, patch)), onAbandonRun: (run) => void act(() => data.actions.abandonRun(run.id)) }));
+    }, [taskId, taskHistory, feedLength]);
+    if (task === undefined) {
+        return (_jsx(EmptyState, { title: words.task.noSuch.title, body: words.task.noSuch.body, action: _jsx(LinkButton, { href: projectHref(key), children: words.nav.board }) }));
+    }
+    const here = taskHref(key, task.number);
+    return (_jsx(components.TaskView, { task: task, people: data.people, tasks: data.tasks, decisions: data.decisions, runs: data.runs, history: history, taskHref: (candidate) => taskHref(key, candidate.number), decisionHref: (decisionId) => decisionHref(key, decisionId), fileHref: (artifact) => projectPath(key, "files", artifact.id), docHref: (path) => docHref(key, path), form: route.form, formHref: (form) => taskHref(key, task.number, form), onCancel: () => navigation.back(here), busy: busy, error: error, onChange: (target, patch) => void act(async () => {
+            await data.actions.updateTask(target.id, patch);
+            navigation.replace(here);
+        }), onMove: (target, state) => void act(() => data.actions.updateTask(target.id, { state })), onRaiseDecision: (input) => void act(async () => {
+            await data.actions.raiseDecision(input);
+            navigation.replace(here);
+        }), onAnswer: (decision, input) => void act(() => data.actions.answerDecision(decision.id, input)), onUpdateDecision: (decision, patch) => void act(() => data.actions.updateDecision(decision.id, patch)), onAbandonRun: (run) => void act(() => data.actions.abandonRun(run.id)) }));
 }
 function ProjectPage(props) {
-    const { route, project, data, components, navigate } = props;
-    const [writing, setWriting] = useState(false);
-    const [asking, setAsking] = useState(false);
+    const words = useWords();
+    const { route, project, data, components, navigation } = props;
     const { busy, error, act } = useAction();
     const tasksById = useMemo(() => new Map(data.tasks.map((task) => [task.id, task])), [data.tasks]);
-    const href = (task) => taskHref(project.key, task.id);
+    const key = project.key;
+    const href = (task) => taskHref(key, task.number);
+    const toDoc = (path) => docHref(key, path);
     const owner = project.role === "owner";
     const onMove = (task, state) => void act(() => data.actions.updateTask(task.id, { state }));
     const onAnswer = (decision, input) => void act(() => data.actions.answerDecision(decision.id, input));
+    const onUpdate = (decision, patch) => void act(() => data.actions.updateDecision(decision.id, patch));
     if (route.name === "board") {
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsx("h1", { className: "sc-page-title", children: project.name }), _jsx(Button, { variant: "primary", onClick: () => setWriting(true), disabled: writing, children: "Write a task" })] }), project.description.length > 0 && _jsx("p", { className: "sc-lead", children: project.description }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), writing && (_jsx("section", { className: "sc-panel", "aria-label": "Write a task", children: _jsx(TaskForm, { people: data.people, parents: data.tasks, busy: busy, onSubmit: (input) => void act(async () => {
-                            await data.actions.createTask(input);
-                            setWriting(false);
-                        }), onCancel: () => setWriting(false) }) })), _jsx(components.Board, { tasks: data.tasks, taskHref: href, onOpen: (task) => navigate(href(task)), onMove: onMove, empty: data.tasks.length === 0 ? (_jsx(EmptyState, { title: "Nothing on the board yet", body: "Write the first task: what is to be done, and for whom.", action: _jsx(Button, { onClick: () => setWriting(true), children: "Write a task" }) })) : undefined })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsx("h1", { className: "sc-page-title", children: project.name }), _jsx(LinkButton, { href: newTaskHref(key), variant: "primary", children: words.board.writeTask })] }), project.description.length > 0 && _jsx("p", { className: "sc-lead", children: project.description }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), _jsx(components.Board, { tasks: data.tasks, taskHref: href, onOpen: (task) => navigation.go(href(task)), onMove: onMove, empty: data.tasks.length === 0 ? (_jsx(EmptyState, { title: words.board.empty.title, body: words.board.empty.body, action: _jsx(LinkButton, { href: newTaskHref(key), children: words.board.writeTask }) })) : undefined })] }));
+    }
+    if (route.name === "new-task") {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sc-page-head", children: _jsx("h1", { className: "sc-page-title", children: words.task.newTitle }) }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), _jsx("section", { className: "sc-panel sc-panel-form", "aria-label": words.task.newAria, children: _jsx(TaskForm, { people: data.people, parents: data.tasks, busy: busy, onSubmit: (input) => void act(async () => {
+                            const made = await data.actions.createTask(input);
+                            navigation.replace(taskHref(key, made.number));
+                        }), onCancel: () => navigation.back(projectHref(key)) }) })] }));
     }
     if (route.name === "task") {
-        const task = tasksById.get(route.id);
-        if (task === undefined) {
-            return (_jsx(EmptyState, { title: "No such task", body: "It may belong to another project, or the link is wrong." }));
-        }
-        return (_jsx(TaskPage, { project: project, task: task, data: data, components: components, busy: busy, error: error, act: act }));
+        return (_jsx(TaskPage, { route: route, project: project, data: data, components: components, navigation: navigation, busy: busy, error: error, act: act }));
     }
     if (route.name === "docs") {
-        return _jsx(DocsPage, { project: project, path: route.path, data: data, navigate: navigate });
+        return (_jsx(DocsPage, { project: project, path: route.path, view: route.view, data: data, navigation: navigation }));
     }
     if (route.name === "decisions") {
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsx("h1", { className: "sc-page-title", children: "Decisions" }), _jsx(Button, { variant: "primary", onClick: () => setAsking(true), disabled: asking, children: "Raise a decision" })] }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), asking && (_jsx("section", { className: "sc-panel", "aria-label": "Raise a decision", children: _jsx(DecisionForm, { tasks: data.tasks, busy: busy, onSubmit: (input) => void act(async () => {
-                            await data.actions.raiseDecision(input);
-                            setAsking(false);
-                        }), onCancel: () => setAsking(false) }) })), _jsx(components.DecisionList, { decisions: data.decisions, tasks: tasksById, taskHref: href, docHref: (path) => docHref(project.key, path), onAnswer: onAnswer, onUpdate: (decision, patch) => void act(() => data.actions.updateDecision(decision.id, patch)), busy: busy, empty: _jsx(EmptyState, { title: "Nothing waits for a person", body: "A decision raised from a task, or from here, shows up on this page." }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsx("h1", { className: "sc-page-title", children: words.decisions.title }), _jsx(LinkButton, { href: newDecisionHref(key), variant: "primary", children: words.decisions.raise })] }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), _jsx(components.DecisionList, { decisions: data.decisions, tasks: tasksById, taskHref: href, docHref: toDoc, decisionHref: (decision) => decisionHref(key, decision.id), onAnswer: onAnswer, onUpdate: onUpdate, busy: busy, empty: _jsx(EmptyState, { title: words.decisions.empty.title, body: words.decisions.empty.body }) })] }));
+    }
+    if (route.name === "new-decision") {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sc-page-head", children: _jsx("h1", { className: "sc-page-title", children: words.decisions.raise }) }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), _jsx("section", { className: "sc-panel sc-panel-form", "aria-label": words.decisions.raiseAria, children: _jsx(DecisionForm, { tasks: data.tasks, busy: busy, onSubmit: (input) => void act(async () => {
+                            const made = await data.actions.raiseDecision(input);
+                            navigation.replace(decisionHref(key, made.id));
+                        }), onCancel: () => navigation.back(projectHref(key, "decisions")) }) })] }));
+    }
+    if (route.name === "decision") {
+        const decision = data.decisions.find((candidate) => candidate.id === route.id);
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsx("h1", { className: "sc-page-title", children: words.decisions.one }), _jsx(LinkButton, { href: projectHref(key, "decisions"), children: words.decisions.all })] }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), decision === undefined ? (_jsx(EmptyState, { title: words.decisions.noSuch.title, body: words.decisions.noSuch.body })) : (_jsx(DecisionCard, { decision: decision, task: decision.taskId === null ? undefined : tasksById.get(decision.taskId), taskHref: href, docHref: toDoc, onAnswer: onAnswer, onUpdate: onUpdate, busy: busy }))] }));
     }
     if (route.name === "feed") {
-        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sc-page-head", children: _jsx("h1", { className: "sc-page-title", children: "What happened" }) }), _jsx(components.EventFeed, { events: data.events, href: (event) => event.taskId !== null
-                        ? taskHref(project.key, event.taskId)
-                        : event.data.path !== undefined
-                            ? docHref(project.key, event.data.path)
-                            : undefined, empty: _jsx(EmptyState, { title: "Nothing happened yet" }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sc-page-head", children: _jsx("h1", { className: "sc-page-title", children: words.feed.title }) }), _jsx(components.EventFeed, { events: data.events, href: (event) => {
+                        const task = event.taskId === null ? undefined : tasksById.get(event.taskId);
+                        if (task !== undefined) {
+                            return href(task);
+                        }
+                        if (event.decisionId !== null) {
+                            return decisionHref(key, event.decisionId);
+                        }
+                        return event.data.path === undefined ? undefined : toDoc(event.data.path);
+                    }, empty: _jsx(EmptyState, { title: words.feed.empty }) })] }));
     }
     if (route.name === "skills") {
-        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sc-page-head", children: _jsx("h1", { className: "sc-page-title", children: "Skills" }) }), _jsx(components.SkillList, { skills: data.skills })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sc-page-head", children: _jsx("h1", { className: "sc-page-title", children: words.nav.skills }) }), _jsx(components.SkillList, { skills: data.skills })] }));
     }
     if (route.name === "members") {
         const me = data.me?.person ?? undefined;
-        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sc-page-head", children: _jsx("h1", { className: "sc-page-title", children: "Members" }) }), _jsxs("p", { className: "sc-lead", children: [project.visibility === "workspace"
-                            ? "Everyone of the workspace is a member of this project; those listed here are its owners and the people named besides. "
-                            : "Only those listed here are in this project. ", "An owner configures the project; a member works on it. A workspace administrator is an owner of every project."] }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), _jsx(components.MemberList, { members: data.members, people: data.people, me: me, busy: busy, onAdd: owner ? (input) => void act(() => data.actions.addMember(input)) : undefined, onChangeRole: owner
+        const members = words.projects.members;
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sc-page-head", children: _jsx("h1", { className: "sc-page-title", children: members.title }) }), _jsxs("p", { className: "sc-lead", children: [project.visibility === "workspace" ? members.leadWorkspace : members.leadPrivate, " ", members.leadRoles] }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), _jsx(components.MemberList, { members: data.members, people: data.people, me: me, busy: busy, onAdd: owner ? (input) => void act(() => data.actions.addMember(input)) : undefined, onChangeRole: owner
                         ? (member, role) => void act(() => data.actions.updateMember(member.person.id, { role }))
                         : undefined, onRemove: owner
                         ? (member) => void act(() => data.actions.removeMember(member.person.id))
-                        : undefined, empty: _jsx(EmptyState, { title: "Nobody is listed", body: project.visibility === "workspace"
-                            ? "Everyone of the workspace is in; the administrators own it."
-                            : "The administrators own it until an owner is listed." }) })] }));
+                        : undefined, empty: _jsx(EmptyState, { title: members.empty.title, body: project.visibility === "workspace" ? members.empty.workspace : members.empty.private }) })] }));
     }
     if (route.name === "settings") {
+        const settings = words.projects.settings;
         if (!owner) {
-            return (_jsx(EmptyState, { title: "Only an owner may change the project", body: "Ask one of its owners, or a workspace administrator." }));
+            return _jsx(EmptyState, { title: settings.onlyOwner.title, body: settings.onlyOwner.body });
         }
-        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sc-page-head", children: _jsx("h1", { className: "sc-page-title", children: "Settings" }) }), _jsxs("p", { className: "sc-lead", children: ["The key, ", _jsx("code", { children: project.key }), ", is what paths and the command say, and does not change. The skills address names a repository served by SkillCDN; empty, the organization's skills are shown."] }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), _jsx("section", { className: "sc-panel", "aria-label": "Project settings", children: _jsx(ProjectForm, { project: project, busy: busy, onSubmit: (input) => void act(() => data.actions.updateProject(input)) }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sc-page-head", children: _jsx("h1", { className: "sc-page-title", children: settings.title }) }), _jsxs("p", { className: "sc-lead", children: [settings.leadBefore, _jsx("code", { children: project.key }), settings.leadAfter] }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), _jsx("section", { className: "sc-panel sc-panel-form", "aria-label": settings.aria, children: _jsx(ProjectForm, { project: project, busy: busy, onSubmit: (input) => void act(() => data.actions.updateProject(input)) }) })] }));
     }
-    return _jsx(EmptyState, { title: "There is nothing at this address" });
+    return _jsx(NothingHere, {});
+}
+function NothingHere() {
+    const words = useWords();
+    return (_jsx(EmptyState, { title: words.common.nothingHere.title, body: words.common.nothingHere.body, action: _jsx(LinkButton, { href: PATHS.projects, children: words.nav.projects }) }));
+}
+/** One person's agents, for an administrator: read on their own, and taken away from here. */
+function PersonAgentsPage(props) {
+    const words = useWords();
+    const { id, data, components } = props;
+    const me = data.me?.person ?? undefined;
+    const administrator = me?.role === "admin";
+    const person = data.people.find((candidate) => candidate.id === id);
+    const [tokens, setTokens] = useState(undefined);
+    const [generation, setGeneration] = useState(0);
+    const { busy, error, act } = useAction();
+    const { personTokens } = data.actions;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `generation` is the trigger
+    useEffect(() => {
+        if (!administrator) {
+            return;
+        }
+        const controller = new AbortController();
+        personTokens(id, controller.signal)
+            .then((answer) => {
+            if (!controller.signal.aborted) {
+                setTokens(answer.items);
+            }
+        })
+            .catch(() => undefined);
+        return () => controller.abort();
+    }, [id, administrator, personTokens, generation]);
+    if (!administrator) {
+        return (_jsx(EmptyState, { title: words.people.onlyAdmin.title, body: words.people.onlyAdmin.body, action: _jsx(LinkButton, { href: PATHS.agents, children: words.nav.agents }) }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsx("h1", { className: "sc-page-title", children: words.people.agentsOf(person?.login ?? "?") }), _jsx(LinkButton, { href: PATHS.people, children: words.nav.people })] }), _jsx("p", { className: "sc-lead", children: words.people.agentsLead(person?.name ?? person?.login ?? words.feed.someone) }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), tokens === undefined ? (_jsx("div", { className: "sc-loading", children: _jsx(Spinner, { label: words.people.loadingAgents }) })) : (_jsx(components.TokenList, { tokens: tokens, busy: busy, onRevoke: (token) => void act(async () => {
+                    await data.actions.revokePersonToken(id, token.id);
+                    setGeneration((current) => current + 1);
+                }), empty: _jsx(EmptyState, { title: words.people.noAgent }) }))] }));
 }
 function WorkspacePage(props) {
-    const { route, data, components } = props;
-    const [making, setMaking] = useState(false);
+    const words = useWords();
+    const { route, data, components, navigation } = props;
     const [fresh, setFresh] = useState(undefined);
     const { busy, error, act } = useAction();
     if (route.name === "people") {
         const me = data.me?.person ?? undefined;
         const administrator = me?.role === "admin";
-        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sc-page-head", children: _jsx("h1", { className: "sc-page-title", children: "People" }) }), _jsx("p", { className: "sc-lead", children: "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." }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), _jsx(components.PeopleList, { people: data.people, me: me, busy: busy, onChangeRole: administrator
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sc-page-head", children: _jsx("h1", { className: "sc-page-title", children: words.people.title }) }), _jsx("p", { className: "sc-lead", children: words.people.lead }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), _jsx(components.PeopleList, { people: data.people, me: me, busy: busy, onChangeRole: administrator
                         ? (person, role) => void act(() => data.actions.updatePerson(person.id, { role }))
-                        : undefined })] }));
+                        : undefined, agentsHref: administrator ? (person) => personAgentsHref(person.id) : undefined })] }));
+    }
+    if (route.name === "person-agents") {
+        return _jsx(PersonAgentsPage, { id: route.id, data: data, components: components });
     }
-    if (route.name === "tokens") {
+    if (route.name === "connect") {
+        return _jsx(ConnectPage, { code: route.code, data: data, navigation: navigation });
+    }
+    if (route.name === "agents" || route.name === "new-token") {
+        const agents = words.agents;
+        const making = route.name === "new-token";
         const origin = typeof window === "undefined" ? "" : window.location.origin;
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsx("h1", { className: "sc-page-title", children: "Tokens" }), _jsx(Button, { variant: "primary", onClick: () => setMaking(true), disabled: making, children: "Make a token" })] }), _jsx("p", { className: "sc-lead", children: "A token lets an agent, a script or a console of your own act as you on this board: what you may do, it may do. Make one per agent, name it after where it runs, and remove it when that is over." }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), fresh !== undefined && (_jsx(NewToken, { token: fresh.token, secret: fresh.secret, onDone: () => setFresh(undefined) })), making && (_jsx("section", { className: "sc-panel", "aria-label": "Make a token", children: _jsx(TokenForm, { busy: busy, onSubmit: (input) => void act(async () => {
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsx("h1", { className: "sc-page-title", children: agents.title }), !making && (_jsx(LinkButton, { href: PATHS.newToken, variant: "primary", children: agents.makeByHand }))] }), _jsx("p", { className: "sc-lead", children: agents.lead }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), fresh !== undefined && (_jsx(NewToken, { token: fresh.token, secret: fresh.secret, onDone: () => setFresh(undefined) })), making && (_jsx("section", { className: "sc-panel sc-panel-form", "aria-label": agents.makeAria, children: _jsx(TokenForm, { daysAtMost: data.me?.workspace.tokenDaysAtMost, busy: busy, onSubmit: (input) => void act(async () => {
                             setFresh(await data.actions.createToken(input));
-                            setMaking(false);
-                        }), onCancel: () => setMaking(false) }) })), _jsx(components.TokenList, { tokens: data.tokens, busy: busy, onRevoke: (token) => void act(() => data.actions.revokeToken(token.id)), empty: _jsx(EmptyState, { title: "No tokens yet", body: "Make one for your agent, and it can work on this board as you." }) }), _jsxs("section", { className: "sc-panel sc-connect", "aria-label": "Connecting an agent", children: [_jsx("h2", { className: "sc-section-title", children: "Connecting an agent" }), _jsxs("p", { children: ["An agent works this board with the ", _jsx("code", { children: "console" }), " command, which comes with the", " ", _jsx("code", { children: "@skillcdn/console" }), " package. Install the package where the agent runs, sign the command in with a token made here, and say which project the directory works in:"] }), _jsxs("pre", { className: "sc-code", children: ["npm install -g @skillcdn/console", "\n", "console login --url ", origin, "\n", "console use ", "<project key>"] }), _jsxs("p", { children: ["It asks for the token and keeps it in your home directory, and your agent is you from then on: ", _jsx("code", { children: "console take" }), " starts work on a task, ", _jsx("code", { children: "console report" }), ",", " ", _jsx("code", { children: "console hand-in" }), " and ", _jsx("code", { children: "console ask" }), " say how it goes, and", " ", _jsx("code", { children: "console finish" }), " ends the run. ", _jsx("code", { children: "console help" }), " says the rest."] })] })] }));
+                            navigation.replace(PATHS.agents);
+                        }), onCancel: () => navigation.back(PATHS.agents) }) })), _jsx(components.TokenList, { tokens: data.tokens, busy: busy, onRevoke: (token) => void act(() => data.actions.revokeToken(token.id)), empty: _jsx(EmptyState, { title: agents.empty.title, body: agents.empty.body }) }), _jsx(ConnectWords, { origin: origin })] }));
     }
-    return _jsx(EmptyState, { title: "There is nothing at this address" });
+    return _jsx(NothingHere, {});
 }
 export function createConsole(config = {}) {
     const components = { ...DEFAULT_COMPONENTS, ...config.components };
     const client = config.client ?? createClient({ baseUrl: config.baseUrl ?? "" });
     const fallbackTitle = config.title ?? "Console";
+    const languages = config.languages ?? DEFAULT_LANGUAGES;
     function App(props) {
-        const { location, navigate } = useLocation(props.initialPath);
-        const route = useMemo(() => matchRoute(location.pathname), [location.pathname]);
+        const { location, navigation } = useNavigation(props.initialPath);
+        useFollowLinks(navigation);
+        const route = useMemo(() => matchRoute(location.pathname, location.search), [location.pathname, location.search]);
         const projectKey = projectOf(route);
         const data = useConsoleData(client, projectKey);
         const failure = signInFailureOf(location.search);
         const title = data.me?.workspace.name ?? fallbackTitle;
+        // The language: the person's choice, else the browser's, else the first the console speaks.
+        const chosen = data.me?.language;
+        const pack = useMemo(() => chooseLanguage(chosen, typeof navigator === "undefined" ? [] : navigator.languages, languages), [chosen]);
+        const words = pack.messages;
+        // An address that moved is shown at its new one, in its place.
+        useEffect(() => {
+            if (route.name === "moved") {
+                navigation.replace(route.to);
+            }
+        }, [route, navigation]);
         useEffect(() => {
             if (typeof document !== "undefined") {
                 document.title = data.project === undefined ? title : `${data.project.name} · ${title}`;
+                document.documentElement.lang = pack.tag;
             }
-        }, [title, data.project]);
+        }, [title, data.project, pack.tag]);
+        let content;
         if (data.me === undefined) {
-            return (_jsx("div", { className: "sc-loading", children: data.error === undefined ? (_jsx(Spinner, { label: "Loading" })) : (_jsx(Callout, { tone: "danger", title: "The console could not be reached", action: _jsx(Button, { onClick: data.reload, children: "Try again" }), children: data.error })) }));
+            content = (_jsx(Ground, { children: _jsx("div", { className: "sc-loading", children: data.error === undefined ? (_jsx(Spinner, { label: words.common.loading })) : (_jsx(Callout, { tone: "danger", title: words.common.couldNotReach, action: _jsx(Button, { onClick: data.reload, children: words.common.tryAgain }), children: data.error })) }) }));
         }
-        if (data.me.person === null) {
-            return (_jsx(components.SignIn, { title: title, providers: data.me.signIn, returnTo: withoutSignInParam(location.pathname, location.search), failure: failure }));
+        else if (data.me.person === null) {
+            content = (_jsx(Ground, { children: _jsx(components.SignIn, { title: title, brand: config.brand, providers: data.me.signIn, returnTo: withoutSignInParam(location.pathname, location.search), failure: failure }) }));
         }
-        const project = data.project;
-        const waiting = data.decisions.filter((decision) => decision.answer === null).length;
-        const nav = projectKey === undefined
-            ? [{ href: PATHS.projects, label: "Projects", current: route.name === "projects" }]
-            : [
-                {
-                    href: projectHref(projectKey),
-                    label: "Board",
-                    current: route.name === "board" || route.name === "task",
-                },
-                {
-                    href: projectHref(projectKey, "docs"),
-                    label: "Docs",
-                    current: route.name === "docs",
-                },
-                {
-                    href: projectHref(projectKey, "decisions"),
-                    label: "Decisions",
-                    current: route.name === "decisions",
-                    count: waiting,
-                },
+        else {
+            const project = data.project;
+            const waiting = data.decisions.filter((decision) => decision.answer === null).length;
+            const workspaceNav = [
                 {
-                    href: projectHref(projectKey, "feed"),
-                    label: "Feed",
-                    current: route.name === "feed",
+                    href: PATHS.projects,
+                    label: words.nav.projects,
+                    current: route.name === "projects" || route.name === "new-project",
                 },
                 {
-                    href: projectHref(projectKey, "skills"),
-                    label: "Skills",
-                    current: route.name === "skills",
+                    href: PATHS.people,
+                    label: words.nav.people,
+                    current: route.name === "people" || route.name === "person-agents",
                 },
                 {
-                    href: projectHref(projectKey, "members"),
-                    label: "Members",
-                    current: route.name === "members",
+                    href: PATHS.agents,
+                    label: words.nav.agents,
+                    current: route.name === "agents" || route.name === "new-token",
                 },
-                ...(project?.role === "owner"
-                    ? [
-                        {
-                            href: projectHref(projectKey, "settings"),
-                            label: "Settings",
-                            current: route.name === "settings",
-                        },
-                    ]
-                    : []),
             ];
-        nav.push({ href: PATHS.people, label: "People", current: route.name === "people" }, { href: PATHS.tokens, label: "Tokens", current: route.name === "tokens" });
-        let page;
-        if (!data.loaded) {
-            page = (_jsx("div", { className: "sc-loading", children: _jsx(Spinner, { label: "Loading the workspace" }) }));
-        }
-        else if (route.name === "projects") {
-            page = _jsx(ProjectsPage, { data: data, components: components, navigate: navigate });
-        }
-        else if (projectKey === undefined) {
-            page = _jsx(WorkspacePage, { route: route, data: data, components: components });
-        }
-        else if (data.projectError !== undefined) {
-            page = (_jsx(EmptyState, { title: "No such project", body: "It may not exist, or it is not yours to see. The projects you may work in are on the front page.", action: _jsx(Button, { onClick: () => navigate(PATHS.projects), children: "Projects" }) }));
-        }
-        else if (!data.projectLoaded || project === undefined) {
-            page = (_jsx("div", { className: "sc-loading", children: _jsx(Spinner, { label: "Loading the project" }) }));
-        }
-        else {
-            page = (_jsx(ProjectPage, { route: route, project: project, data: data, components: components, navigate: navigate }));
+            const nav = projectKey === undefined
+                ? workspaceNav
+                : [
+                    {
+                        href: projectHref(projectKey),
+                        label: words.nav.board,
+                        current: route.name === "board" || route.name === "task" || route.name === "new-task",
+                    },
+                    {
+                        href: projectHref(projectKey, "docs"),
+                        label: words.nav.docs,
+                        current: route.name === "docs",
+                    },
+                    {
+                        href: projectHref(projectKey, "decisions"),
+                        label: words.nav.decisions,
+                        current: route.name === "decisions" ||
+                            route.name === "decision" ||
+                            route.name === "new-decision",
+                        count: waiting,
+                    },
+                    {
+                        href: projectHref(projectKey, "feed"),
+                        label: words.nav.feed,
+                        current: route.name === "feed",
+                    },
+                    {
+                        href: projectHref(projectKey, "skills"),
+                        label: words.nav.skills,
+                        current: route.name === "skills",
+                    },
+                    {
+                        href: projectHref(projectKey, "members"),
+                        label: words.nav.members,
+                        current: route.name === "members",
+                    },
+                    ...(project?.role === "owner"
+                        ? [
+                            {
+                                href: projectHref(projectKey, "settings"),
+                                label: words.nav.settings,
+                                current: route.name === "settings",
+                            },
+                        ]
+                        : []),
+                ];
+            let page;
+            if (!data.loaded || route.name === "moved") {
+                page = (_jsx("div", { className: "sc-loading", children: _jsx(Spinner, { label: words.common.loadingWorkspace }) }));
+            }
+            else if (route.name === "projects" || route.name === "new-project") {
+                page = (_jsx(ProjectsPage, { data: data, components: components, navigation: navigation, making: route.name === "new-project" }));
+            }
+            else if (projectKey === undefined) {
+                page = (_jsx(WorkspacePage, { route: route, data: data, components: components, navigation: navigation }));
+            }
+            else if (data.projectError !== undefined) {
+                page = (_jsx(EmptyState, { title: words.common.noSuchProject.title, body: words.common.noSuchProject.body, action: _jsx(LinkButton, { href: PATHS.projects, children: words.nav.projects }) }));
+            }
+            else if (!data.projectLoaded || project === undefined) {
+                page = (_jsx("div", { className: "sc-loading", children: _jsx(Spinner, { label: words.common.loadingProject }) }));
+            }
+            else {
+                page = (_jsx(ProjectPage, { route: route, project: project, data: data, components: components, navigation: navigation }));
+            }
+            content = (_jsx(components.Shell, { title: title, brand: config.brand, project: projectKey === undefined
+                    ? undefined
+                    : { name: project?.name ?? projectKey, href: projectHref(projectKey) }, nav: nav, menu: workspaceNav, languages: languages.map((candidate) => ({
+                    tag: candidate.tag,
+                    label: candidate.label,
+                    current: candidate.tag === pack.tag,
+                })), onLanguage: (tag) => void data.actions.updateMe({ language: tag }).catch(() => undefined), person: data.me.person, live: projectKey === undefined ? undefined : data.live, wide: route.name === "board", onNavigate: (href) => navigation.go(href), onSignOut: () => void data.actions.signOut(), children: page }));
         }
-        return (_jsx(components.Shell, { title: title, project: projectKey === undefined
-                ? undefined
-                : { name: project?.name ?? projectKey, href: projectHref(projectKey) }, nav: nav, person: data.me.person, live: projectKey === undefined ? undefined : data.live, onNavigate: (href) => navigate(href), onSignOut: () => void data.actions.signOut(), children: page }));
+        return _jsx(LanguageContext.Provider, { value: pack, children: content });
     }
     return {
         App,