@skillcdn/console 0.4.0 → 0.4.1

package/src/components/markdown.tsx

@@ -2,11 +2,13 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { isDocumentPath } from "../documents.js";
 import { type Picture, PictureThumb } from "./pictures.js";
+import { useRemotePictureSrc } from "./remote-pictures.js";
 
 // What people and agents write is untrusted. It is rendered as React elements, never as HTML:
 // raw HTML in the source stays text, links are limited to a few schemes and open elsewhere,
-// and pictures come over https only, lazily and without a referrer. A link whose destination
-// is a document's path (ADR-0009) leads to the document's page, when the page knows where.
+// and a picture from elsewhere, named over https, is read through the console (ADR-0048),
+// lazily and without a referrer. A link whose destination is a document's path (ADR-0009)
+// leads to the document's page, when the page knows where.
 
 const SAFE_LINK = /^(https?:|mailto:)/i;
 const SAFE_IMAGE = /^https:\/\//i;
@@ -29,6 +31,7 @@ export interface MarkdownProps {
 }
 
 export function Markdown(props: MarkdownProps) {
+  const remote = useRemotePictureSrc();
   return (
     <div className="sc-prose">
       <ReactMarkdown
@@ -62,7 +65,7 @@ export function Markdown(props: MarkdownProps) {
           img({ src, alt, title }) {
             const named = typeof src === "string" ? props.fileSrc?.(src) : undefined;
             const url =
-              named ?? (typeof src === "string" && SAFE_IMAGE.test(src) ? src : undefined);
+              named ?? (typeof src === "string" && SAFE_IMAGE.test(src) ? remote(src) : undefined);
             if (url === undefined) {
               return <span className="sc-prose-image-text">{alt ?? ""}</span>;
             }

package/src/components/pack-connect.tsx

@@ -6,8 +6,9 @@ import { Button, Time } from "./ui.js";
 // A private pack connected with a code a person approves (ADR-0036): an owner, or for the
 // workspace's token an administrator, asks, the console asks the deployment and shows what it
 // answered, the code and the page, and the person approves there; the page asks the console
-// again at the interval the deployment named until the token is kept or the request ended.
-// Takes its data through the callbacks and keeps nothing itself.
+// to claim the token at the interval the deployment named, until the token is kept or the
+// request ended; reading how the request stands, when the page opens, changes nothing
+// (ADR-0046). Takes its data through the callbacks and keeps nothing itself.
 
 /**
  * How a connection stands, as the component needs it: what the API answers for a project's
@@ -20,8 +21,10 @@ export type PackConnectState =
 export interface PackConnectProps {
   /** Asks the deployment to connect; answers what the person is shown. */
   readonly onStart: () => Promise<RestPackConnectStarted>;
-  /** How the connection stands; the token is kept when the person approved. */
+  /** How the connection stands, read when the page opens; changes nothing. */
   readonly poll: (signal?: AbortSignal) => Promise<PackConnectState>;
+  /** Asks the console to claim the token at the deployment: pending still, connected, or ended. */
+  readonly claim: (signal?: AbortSignal) => Promise<PackConnectState>;
   /** Gives the connection up. */
   readonly onCancel: () => Promise<void>;
   /** Called once the token is kept. */
@@ -47,7 +50,7 @@ const MIN_INTERVAL_SECONDS = 2;
 export function PackConnect(props: PackConnectProps) {
   const words = useWords();
   const pack = words.projects.packToken;
-  const { poll, onConnected } = props;
+  const { poll, claim, onConnected } = props;
   const [shown, setShown] = useState<Shown>({ kind: "idle" });
   const [problem, setProblem] = useState<string | undefined>(undefined);
 
@@ -64,7 +67,7 @@ export function PackConnect(props: PackConnectProps) {
     return () => controller.abort();
   }, [poll]);
 
-  // While waiting, the console is asked again at the interval the deployment named; a new
+  // While waiting, the console is asked to claim at the interval the deployment named; a new
   // answer, pending still, is a new state, which schedules the next asking.
   useEffect(() => {
     if (shown.kind !== "waiting") {
@@ -72,7 +75,7 @@ export function PackConnect(props: PackConnectProps) {
     }
     const controller = new AbortController();
     const timer = setTimeout(() => {
-      poll(controller.signal)
+      claim(controller.signal)
         .then((state) => {
           if (controller.signal.aborted) {
             return;
@@ -102,7 +105,7 @@ export function PackConnect(props: PackConnectProps) {
       controller.abort();
       clearTimeout(timer);
     };
-  }, [shown, poll, onConnected]);
+  }, [shown, claim, onConnected]);
 
   const start = () => {
     setProblem(undefined);

package/src/components/pack-token.tsx

@@ -20,8 +20,10 @@ export interface PackTokenWaysProps {
   readonly busy?: boolean | undefined;
   /** Asks the deployment to connect; answers what the person is shown. */
   readonly onStart: () => Promise<RestPackConnectStarted>;
-  /** How the connection stands; the token is kept when the person approved. */
+  /** How the connection stands, read when the page opens; changes nothing. */
   readonly poll: (signal?: AbortSignal) => Promise<PackConnectState>;
+  /** Asks the console to claim the token at the deployment (ADR-0046). */
+  readonly claim: (signal?: AbortSignal) => Promise<PackConnectState>;
   /** Gives the connection up. */
   readonly onCancelConnect: () => Promise<void>;
   /** Called once the token is kept. */
@@ -46,6 +48,7 @@ export function PackTokenWays(props: PackTokenWaysProps) {
           <PackConnect
             onStart={props.onStart}
             poll={props.poll}
+            claim={props.claim}
             onCancel={props.onCancelConnect}
             onConnected={props.onConnected}
             busy={props.busy}

package/src/components/people.tsx

@@ -57,6 +57,19 @@ export function PeopleList(props: PeopleListProps) {
     person.source !== "organization" &&
     props.me?.id !== person.id;
   const organization = props.organization ?? undefined;
+  /** What let the person in, by its name: the organization, the domain of their login, or an administrator. */
+  const noteOf = (person: RestPerson): string => {
+    if (person.source === "organization") {
+      return organization === undefined
+        ? people.source.organization
+        : people.ofOrganization(organization.name);
+    }
+    if (person.source === "domain") {
+      const at = person.login.lastIndexOf("@");
+      return at === -1 ? people.source.domain : people.ofDomain(person.login.slice(at + 1));
+    }
+    return people.source.listed;
+  };
   return (
     <div className="sc-people-page">
       {organization !== undefined && (
@@ -79,8 +92,8 @@ export function PeopleList(props: PeopleListProps) {
               <span className="sc-person-you">{words.common.you}</span>
             )}
             <span className="sc-person-name sc-muted">
-              {person.name === null ? "" : person.login}
-              <span className="sc-person-note"> {people.source[person.source]}</span>
+              {person.name !== null && <>{person.login} · </>}
+              <span className="sc-person-note">{noteOf(person)}</span>
             </span>
             {props.onChangeRole === undefined ? (
               <RoleBadge role={person.role} />
@@ -163,12 +176,9 @@ export function PeopleList(props: PeopleListProps) {
               <li key={person.id} className="sc-person-row sc-person-row-out">
                 <PersonChip person={person} size="md" />
                 <span className="sc-person-name sc-muted">
-                  {person.name === null ? "" : person.login}
+                  {person.name !== null && <>{person.login} · </>}
                   <span className="sc-person-note">
-                    {" "}
-                    {person.source === "organization"
-                      ? people.leftOrganization
-                      : people.source[person.source]}
+                    {person.source === "organization" ? people.leftOrganization : noteOf(person)}
                     {person.deactivatedAt !== null && (
                       <>
                         {" "}

package/src/components/remote-pictures.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import { REST_ROUTES } from "../routes.js";
+
+// Where a picture from elsewhere is read (ADR-0048): through the console, which fetches it and
+// keeps it a while, so that the person's browser reaches nobody's server and the pages load
+// nothing from elsewhere. The composition provides the client's way to it; a component outside
+// one reads it at the API's own path, which a console served beside its API answers.
+
+/** The address a picture from elsewhere is read at, given the https URL that names it. */
+export type RemotePictureSrc = (url: string) => string;
+
+export const defaultRemotePictureSrc: RemotePictureSrc = (url) =>
+  `${REST_ROUTES.pictures}?src=${encodeURIComponent(url)}`;
+
+export const RemotePicturesContext = createContext<RemotePictureSrc>(defaultRemotePictureSrc);
+
+export function useRemotePictureSrc(): RemotePictureSrc {
+  return useContext(RemotePicturesContext);
+}

package/src/components/sign-in.tsx

@@ -1,10 +1,11 @@
-import { loginPath, type RestProvider, type SignInFailure } from "../api.js";
+import { type MouseEvent, useEffect, useState } from "react";
+import { loginPath, type ProviderKey, type RestProvider, type SignInFailure } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import type { Brand } from "./shell.js";
-import { Callout } from "./ui.js";
+import { Callout, cx } from "./ui.js";
 
 // The page a person sees before they are anyone: the way to each provider the deployment has,
-// and what went wrong the last time, when something did.
+// who gets in through it, and what went wrong the last time, when something did.
 
 export interface SignInProps {
   readonly title: string;
@@ -19,6 +20,35 @@ export interface SignInProps {
 
 export function SignIn(props: SignInProps) {
   const words = useWords().signIn;
+  // The way being taken: its button says so from the click until the page leaves, and says so
+  // no more when the browser brings this page back from its cache, as on the way back.
+  const [taken, setTaken] = useState<ProviderKey | undefined>(undefined);
+  useEffect(() => {
+    const shown = (event: PageTransitionEvent): void => {
+      if (event.persisted) {
+        setTaken(undefined);
+      }
+    };
+    window.addEventListener("pageshow", shown);
+    return () => window.removeEventListener("pageshow", shown);
+  }, []);
+  const take = (provider: ProviderKey) => (event: MouseEvent<HTMLAnchorElement>) => {
+    if (taken !== undefined) {
+      // One way at a time: a second click, on any of the buttons, goes nowhere.
+      event.preventDefault();
+      return;
+    }
+    setTaken(provider);
+  };
+  const admitsOf = (admits: NonNullable<RestProvider["admits"]>): string => {
+    if (admits.organization !== null) {
+      return words.admits.organization(admits.organization);
+    }
+    if (admits.domains.length > 0) {
+      return words.admits.domains(admits.domains.join(", "));
+    }
+    return words.admits.listed;
+  };
   return (
     <div className="sc-sign-in">
       {props.brand?.symbol !== undefined && (
@@ -44,18 +74,89 @@ export function SignIn(props: SignInProps) {
         </Callout>
       ) : (
         <div className="sc-sign-in-ways">
-          {props.providers.map((provider) => (
-            // A real navigation: signing in happens at the provider, not in this page.
-            <a
-              key={provider.key}
-              className="sc-button sc-button-primary sc-sign-in-button"
-              href={loginPath(provider.key, props.returnTo)}
-            >
-              {words.continueWith(provider.label)}
-            </a>
-          ))}
+          {props.providers.map((provider) => {
+            const going = taken === provider.key;
+            return (
+              <div key={provider.key} className="sc-sign-in-way">
+                {/* A real navigation: signing in happens at the provider, not in this page. */}
+                <a
+                  className={cx(
+                    "sc-button sc-button-primary sc-sign-in-button",
+                    going && "sc-sign-in-button-going",
+                  )}
+                  href={loginPath(provider.key, props.returnTo)}
+                  aria-busy={going ? true : undefined}
+                  aria-disabled={taken !== undefined && !going ? true : undefined}
+                  onClick={take(provider.key)}
+                >
+                  <ProviderMark provider={provider.key} />
+                  <span className="sc-sign-in-button-label">
+                    {going ? words.going(provider.label) : words.signInWith(provider.label)}
+                  </span>
+                  {going && (
+                    <span className="sc-spinner sc-sign-in-spinner" aria-hidden="true">
+                      <span className="sc-spinner-ring" />
+                    </span>
+                  )}
+                </a>
+                {provider.admits !== undefined && (
+                  <p className="sc-sign-in-admits">{admitsOf(provider.admits)}</p>
+                )}
+              </div>
+            );
+          })}
         </div>
       )}
     </div>
   );
 }
+
+/**
+ * The provider's mark, as people know it from sign-in buttons elsewhere, beside the label and
+ * decorative: the host's own mark in the button's text color, Google's lettermark on a light
+ * tile, since its colors are its own. A provider without a mark shows the label alone.
+ */
+function ProviderMark(props: { readonly provider: ProviderKey }) {
+  if (props.provider === "gh") {
+    return (
+      <svg
+        className="sc-sign-in-mark"
+        viewBox="0 0 16 16"
+        width="20"
+        height="20"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path
+          fill="currentColor"
+          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+        />
+      </svg>
+    );
+  }
+  if (props.provider === "google") {
+    return (
+      <span className="sc-sign-in-mark sc-sign-in-mark-tile" aria-hidden="true">
+        <svg viewBox="0 0 48 48" width="16" height="16" aria-hidden="true" focusable="false">
+          <path
+            fill="#FFC107"
+            d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
+          />
+          <path
+            fill="#FF3D00"
+            d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"
+          />
+          <path
+            fill="#4CAF50"
+            d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"
+          />
+          <path
+            fill="#1976D2"
+            d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"
+          />
+        </svg>
+      </span>
+    );
+  }
+  return null;
+}

package/src/components/ui.tsx

@@ -11,6 +11,7 @@ import {
 } from "../api.js";
 import { dayOf, daysBetween, formatDay, today } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
+import { useRemotePictureSrc } from "./remote-pictures.js";
 
 // Small building blocks. Each one is a class in styles/console.css and nothing more. Classes
 // are prefixed `sc-` so that a custom console's own styles never collide with them. The words
@@ -96,13 +97,15 @@ export function personName(person: {
 }
 
 /**
- * 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 name instead.
+ * A person's picture as the git host serves it, read through the console (ADR-0048): loaded
+ * lazily, without a referrer, and gone as 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?: "xs" | "sm" | "md" | "lg";
 }) {
+  const remote = useRemotePictureSrc();
   const size = props.size ?? "md";
   const initial = personName(props.person).slice(0, 1).toUpperCase();
   if (props.person.avatar === null) {
@@ -118,7 +121,7 @@ export function Avatar(props: {
   return (
     <img
       className={cx("sc-avatar", `sc-avatar-${size}`)}
-      src={props.person.avatar}
+      src={remote(props.person.avatar)}
       alt=""
       loading="lazy"
       decoding="async"

package/src/console.tsx

@@ -58,6 +58,7 @@ import {
   type ProjectListProps,
   ProjectMark,
 } from "./components/projects.js";
+import { type RemotePictureSrc, RemotePicturesContext } from "./components/remote-pictures.js";
 import { GoalTimeline } from "./components/roadmap.js";
 import { RulesForm, RulesView } from "./components/rules.js";
 import {
@@ -396,14 +397,18 @@ function ProjectsPage(props: {
   readonly making: boolean;
 }) {
   const words = useWords().projects;
-  const { data, components, navigation, making } = props;
+  const { data, components, navigation } = props;
   const { busy, error, act } = useAction();
   const href = (project: RestProject) => projectHref(project.key);
+  // A project is made by an administrator (ADR-0045): a member sees the list alone, the form's
+  // address included.
+  const administrator = data.me?.person?.role === "admin";
+  const making = props.making && administrator;
   return (
     <>
       <div className="sc-page-head">
         <h1 className="sc-page-title">{words.title}</h1>
-        {!making && (
+        {administrator && !making && (
           <LinkButton href={PATHS.newProject} variant="primary">
             {words.newProject}
           </LinkButton>
@@ -436,8 +441,12 @@ function ProjectsPage(props: {
         empty={
           <EmptyState
             title={words.empty.title}
-            body={words.empty.body}
-            action={<LinkButton href={PATHS.newProject}>{words.newProject}</LinkButton>}
+            body={administrator ? words.empty.body : words.empty.bodyMember}
+            action={
+              administrator ? (
+                <LinkButton href={PATHS.newProject}>{words.newProject}</LinkButton>
+              ) : undefined
+            }
           />
         }
       />
@@ -1432,6 +1441,7 @@ function ProjectSettingsPage(props: {
           busy={busy}
           onStart={data.actions.connectPackToken}
           poll={data.actions.packTokenConnection}
+          claim={data.actions.claimPackTokenConnection}
           onCancelConnect={data.actions.cancelPackTokenConnection}
           onConnected={() => navigation.replace(here)}
           onSubmit={(token) =>
@@ -1654,6 +1664,7 @@ function WorkspaceSettingsPage(props: {
           busy={busy}
           onStart={data.actions.connectWorkspacePackToken}
           poll={data.actions.workspacePackTokenConnection}
+          claim={data.actions.claimWorkspacePackTokenConnection}
           onCancelConnect={data.actions.cancelWorkspacePackTokenConnection}
           onConnected={() => navigation.replace(PATHS.settings)}
           onSubmit={(token) =>
@@ -2334,6 +2345,8 @@ function WorkspacePage(props: {
 export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
   const components: ConsoleComponents = { ...DEFAULT_COMPONENTS, ...config.components };
   const client = config.client ?? createClient({ baseUrl: config.baseUrl ?? "" });
+  /** Where the pages read a picture from elsewhere (ADR-0048): through this client's console. */
+  const pictureSrc: RemotePictureSrc = (url) => client.pictureUrl(url);
   const fallbackTitle = config.title ?? "Console";
   const languages = config.languages ?? DEFAULT_LANGUAGES;
   const pages = config.pages ?? [];
@@ -2628,7 +2641,13 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
         </components.Shell>
       );
     }
-    return <LanguageContext.Provider value={pack}>{content}</LanguageContext.Provider>;
+    return (
+      <LanguageContext.Provider value={pack}>
+        <RemotePicturesContext.Provider value={pictureSrc}>
+          {content}
+        </RemotePicturesContext.Provider>
+      </LanguageContext.Provider>
+    );
   }
 
   return {

package/src/data.ts

@@ -66,12 +66,12 @@ import {
 
 // What the console shows, and how it stays current: the workspace (who is signed in, the
 // projects, the people, the tokens) is loaded once; the project the page is on is loaded whole,
-// its feed from the beginning, and from then on the project's stream says when something
+// its feed as it stands, the newest page, and from then on the project's stream says when something
 // changed: on every event the lists are loaded again, which is the boring way to be right.
 
 /** How many events the feed keeps on the page. */
 const FEED_KEEP = 200;
-/** How many pages of the feed are read at the start before the stream takes over. */
+/** How many pages of a task's own events are read for its thread, which is read from the beginning. */
 const FEED_MAX_PAGES = 20;
 /** How long changes that arrive together are gathered before the lists are loaded once. */
 const RELOAD_DELAY_MS = 150;
@@ -89,8 +89,10 @@ export interface ConsoleActions {
   removePackToken(): Promise<RestProject>;
   /** Asks the deployment to connect the project's pack with a code a person approves (ADR-0036); for an owner. */
   connectPackToken(): Promise<RestPackConnectStarted>;
-  /** How that connection stands; once connected, the project is the one answered. */
+  /** How that connection stands, read and changed nothing. */
   packTokenConnection(signal?: AbortSignal): Promise<RestPackConnect>;
+  /** Asks the console to claim the token at the deployment (ADR-0046); once connected, the project is the one answered. */
+  claimPackTokenConnection(signal?: AbortSignal): Promise<RestPackConnect>;
   cancelPackTokenConnection(): Promise<void>;
   addMember(input: RestMemberInput): Promise<RestMember>;
   updateMember(personId: string, patch: RestMemberPatch): Promise<RestMember>;
@@ -177,6 +179,7 @@ export interface ConsoleActions {
   removeWorkspacePackToken(): Promise<RestWorkspace>;
   connectWorkspacePackToken(): Promise<RestPackConnectStarted>;
   workspacePackTokenConnection(signal?: AbortSignal): Promise<RestWorkspacePackConnect>;
+  claimWorkspacePackTokenConnection(signal?: AbortSignal): Promise<RestWorkspacePackConnect>;
   cancelWorkspacePackTokenConnection(): Promise<void>;
   /** One person of the workspace by their exact login, or nobody: what an owner lists someone the People page does not show by. */
   findPerson(login: string, signal?: AbortSignal): Promise<RestPerson | undefined>;
@@ -247,23 +250,18 @@ export interface ConsoleData {
   reload(): void;
 }
 
-/** The whole feed of a project from the beginning, page by page, bounded. */
+/**
+ * The feed of a project as it stands: its newest page, oldest first, from which the stream
+ * goes on. Read in one request, where reading it from the beginning was a round trip per
+ * hundred events, each waited for before the board was shown.
+ */
 async function readFeed(
   client: ConsoleClient,
   key: string,
   signal: AbortSignal,
 ): Promise<RestEvent[]> {
-  const events: RestEvent[] = [];
-  let after = 0;
-  for (let page = 0; page < FEED_MAX_PAGES; page += 1) {
-    const result = await client.project(key).events(after, {}, signal);
-    events.push(...result.items);
-    after = result.items.at(-1)?.id ?? after;
-    if (!result.more) {
-      break;
-    }
-  }
-  return events.slice(-FEED_KEEP);
+  const result = await client.project(key).events(0, { latest: true }, signal);
+  return result.items.slice(-FEED_KEEP);
 }
 
 /** How many pages of the current tasks are read before the board is shown as it stands. */
@@ -468,7 +466,7 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
     return () => controller.abort();
   }, [client, generation, refreshWorkspace]);
 
-  // The project the page is on: its lists, its feed from the beginning, and its stream from
+  // The project the page is on: its lists, its feed as it stands, the newest page, and its stream from
   // where the feed ends. Another project, or none, starts over.
   // biome-ignore lint/correctness/useExhaustiveDependencies: `generation` is the trigger
   useEffect(() => {
@@ -612,8 +610,9 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
         return changed;
       },
       connectPackToken: () => scope().connectPackToken(),
-      async packTokenConnection(signal) {
-        const state = await scope().packTokenConnection(signal);
+      packTokenConnection: (signal) => scope().packTokenConnection(signal),
+      async claimPackTokenConnection(signal) {
+        const state = await scope().claimPackTokenConnection(signal);
         if (state.status === "connected") {
           setProject(state.project);
         }
@@ -756,8 +755,9 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
         return workspace;
       },
       connectWorkspacePackToken: () => client.connectWorkspacePackToken(),
-      async workspacePackTokenConnection(signal) {
-        const state = await client.workspacePackTokenConnection(signal);
+      workspacePackTokenConnection: (signal) => client.workspacePackTokenConnection(signal),
+      async claimWorkspacePackTokenConnection(signal) {
+        const state = await client.claimWorkspacePackTokenConnection(signal);
         if (state.status === "connected") {
           const { workspace } = state;
           setMe((current) => (current === undefined ? undefined : { ...current, workspace }));

package/src/i18n/en.ts

@@ -157,7 +157,15 @@ export const en = {
 
   signIn: {
     lead: "Join an organization made of AI agents.",
-    continueWith: (provider: string) => `Continue with ${provider}`,
+    signInWith: (provider: string) => `Sign in with ${provider}`,
+    /** The button while the browser is on its way to the provider. */
+    going: (provider: string) => `Going to ${provider}…`,
+    /** The line under a button: who gets in through that way. */
+    admits: {
+      organization: (name: string) => `For the members of ${name}, the organization at GitHub.`,
+      domains: (domains: string) => `For accounts at ${domains}.`,
+      listed: "For the people an administrator added.",
+    },
     nobody: {
       title: "Nobody can sign in here yet",
       body: "Signing in is not configured on this console. Whoever runs it sets it up as deploy/README.md describes.",
@@ -176,6 +184,8 @@ export const en = {
     empty: {
       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.",
+      bodyMember:
+        "An administrator makes the projects. Ask one for the first, or an owner to add you to theirs.",
     },
     list: "Projects",
     private: "Private",
@@ -889,6 +899,10 @@ export const en = {
       domain: "Of the domain",
       listed: "Added by an administrator",
     } satisfies Record<MembershipSource, string>,
+    /** A person the organization let in, by the organization's name: never read as their own. */
+    ofOrganization: (name: string) => `Member of ${name}`,
+    /** A person a Workspace domain let in, by the domain of their login. */
+    ofDomain: (domain: string) => `Account at ${domain}`,
     at: { gh: "at GitHub", google: "at Google" } satisfies Record<ProviderKey, string>,
     organization: (name: string) => `The organization ${name} at GitHub says who is in.`,
     organizationRead: "Last read",

package/src/i18n/ko.ts

@@ -119,7 +119,13 @@ export const ko: Messages = {
 
   signIn: {
     lead: "AI 에이전트로 이뤄진 조직에 합류하세요.",
-    continueWith: (provider) => `${provider}로 계속`,
+    signInWith: (provider) => `${provider}로 로그인`,
+    going: (provider) => `${provider}로 가는 중…`,
+    admits: {
+      organization: (name) => `GitHub 조직 ${name}의 멤버가 로그인할 수 있습니다.`,
+      domains: (domains) => `${domains} 계정이 로그인할 수 있습니다.`,
+      listed: "관리자가 추가한 사람이 로그인할 수 있습니다.",
+    },
     nobody: {
       title: "아직 아무도 로그인할 수 없습니다",
       body: "이 콘솔에는 로그인이 설정되어 있지 않습니다. 운영자가 deploy/README.md에 따라 설정합니다.",
@@ -138,6 +144,8 @@ export const ko: Messages = {
     empty: {
       title: "아직 프로젝트가 없습니다",
       body: "첫 프로젝트를 만드세요. 무엇을 위한 것인지, 누가 함께하는지. 또는 소유자에게 추가를 요청하세요.",
+      bodyMember:
+        "프로젝트는 관리자가 만듭니다. 관리자에게 첫 프로젝트를, 또는 소유자에게 추가를 요청하세요.",
     },
     list: "프로젝트",
     private: "비공개",
@@ -844,6 +852,8 @@ export const ko: Messages = {
       domain: "도메인의 계정",
       listed: "관리자가 추가함",
     },
+    ofOrganization: (name) => `${name} 조직의 구성원`,
+    ofDomain: (domain) => `${domain} 도메인의 계정`,
     at: { gh: "GitHub", google: "Google" },
     organization: (name) => `GitHub 조직 ${name}이(가) 구성원을 정합니다.`,
     organizationRead: "마지막으로 읽음",

package/src/limits.ts

@@ -79,3 +79,17 @@ export const MAX_PROJECT_SYMBOL_LENGTH = 8;
 export const MAX_PROJECT_ICON_BYTES = 512 * 1024;
 /** How many items a listing answers with when none is asked for, and the most one may ask for. */
 export const DEFAULT_PAGE_LIMIT = 50;
+/**
+ * How many projects one workspace holds, how many tasks, goals, decisions and pages one project
+ * holds, and how many runs one task carries, those put away included: bounds a runaway script
+ * meets and real work does not.
+ */
+export const MAX_PROJECTS_PER_WORKSPACE = 500;
+export const MAX_TASKS_PER_PROJECT = 20_000;
+export const MAX_GOALS_PER_PROJECT = 1_000;
+export const MAX_DECISIONS_PER_PROJECT = 20_000;
+export const MAX_DOCUMENTS_PER_PROJECT = 5_000;
+export const MAX_RUNS_PER_TASK = 500;
+/** How many streams of the live feed one person holds at once, across their tabs, and how many one process of the console holds for everyone. */
+export const MAX_STREAMS_PER_PERSON = 20;
+export const MAX_STREAMS = 1_000;

package/src/routes.ts

@@ -9,6 +9,8 @@ export const REST_ROUTES = {
   me: "/api/v1/me",
   /** The token a request is made with, for it to give itself up. */
   meToken: "/api/v1/me/token",
+  /** A picture from elsewhere, fetched by the console for a page (ADR-0048); `?src=` names it. */
+  pictures: "/api/v1/pictures",
   /** The workspace's settings (ADR-0035), changed by an administrator; read through `me`. */
   workspace: "/api/v1/workspace",
   /** The SkillCDN token the organization's pack is read with (ADR-0036), an administrator's; `/connect` under it connects one with a code. */