@skillcdn/console 0.4.1 → 0.4.3

package/src/console.tsx

@@ -23,6 +23,7 @@ import {
   type RestDecisionPatch,
   type RestEvent,
   type RestMyDecisions,
+  type RestPluginDetail,
   type RestProject,
   type RestProjectInput,
   type RestProjectPatch,
@@ -50,6 +51,8 @@ import { MyDecisions } from "./components/my-decisions.js";
 import { PackTokenWays } from "./components/pack-token.js";
 import { PAGE_SIZE } from "./components/paged.js";
 import { ListingForm, PeopleList, type PeopleListProps } from "./components/people.js";
+import { PluginFrame, PluginWidgets } from "./components/plugin-frame.js";
+import { PluginSettingsList, PluginSettingsView } from "./components/plugin-settings.js";
 import {
   MemberList,
   type MemberListProps,
@@ -104,6 +107,7 @@ import {
   type Messages,
   useWords,
 } from "./i18n/index.js";
+import { pluginNavItems, pluginPagesAt, pluginWordOf } from "./plugin-nav.js";
 import {
   boardHref,
   calendarHref,
@@ -121,6 +125,8 @@ import {
   PATHS,
   personAgentsHref,
   personWorkHref,
+  pluginHref,
+  pluginSettingsHref,
   projectHref,
   projectSettingsHref,
   type Route,
@@ -350,6 +356,14 @@ function useFollowLinks(navigation: Navigation): void {
 }
 
 /** The key of the project a route is on, or nothing. */
+/** The files chosen or pasted on a page, as the client sends them: each by its name, its bytes and its type where the browser knows one. */
+const uploadsOf = (files: readonly File[]): FileUpload[] =>
+  files.map((file) => ({
+    name: file.name,
+    bytes: file,
+    ...(file.type === "" ? {} : { contentType: file.type }),
+  }));
+
 const projectOf = (route: Route): string | undefined =>
   "project" in route ? route.project : undefined;
 
@@ -393,11 +407,27 @@ function ProjectsPage(props: {
   readonly data: ConsoleData;
   readonly components: ConsoleComponents;
   readonly navigation: Navigation;
+  readonly client: ConsoleClient;
+  readonly language: string;
   /** Whether the form for a new project is open: the page is at its address. */
   readonly making: boolean;
 }) {
   const words = useWords().projects;
-  const { data, components, navigation } = props;
+  const { data, components, navigation, client, language } = props;
+  const me = data.me;
+  /** The plugins' widgets at a place of this page (ADR-0054), for the person's roles. */
+  const widgets = (place: "home:top" | "home:bottom") =>
+    me === undefined ? null : (
+      <PluginWidgets
+        plugins={data.plugins}
+        place={place}
+        me={me}
+        language={language}
+        client={client}
+        navigation={navigation}
+        nameOf={(name) => pluginWordOf(name, language)}
+      />
+    );
   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
@@ -415,6 +445,7 @@ function ProjectsPage(props: {
         )}
       </div>
       {error !== undefined && <Callout tone="danger">{error}</Callout>}
+      {widgets("home:top")}
       {making && (
         <section className="sc-panel sc-panel-form" aria-label={words.form.aria}>
           <ProjectForm
@@ -450,10 +481,150 @@ function ProjectsPage(props: {
           />
         }
       />
+      {widgets("home:bottom")}
+    </>
+  );
+}
+
+/**
+ * A plugin's page (ADR-0054): the sub-tabs of its pages at the level, where it has several, above
+ * the frame of the one shown, the first when the address names none. Nothing for a plugin the
+ * person has no page of, or that is not on the project.
+ */
+function PluginPage(props: {
+  readonly route: Extract<Route, { name: "plugin" }>;
+  readonly data: ConsoleData;
+  readonly project: RestProject | undefined;
+  readonly client: ConsoleClient;
+  readonly language: string;
+  readonly navigation: Navigation;
+}) {
+  const words = useWords();
+  const { route, data, project, client, language, navigation } = props;
+  const plugin = data.plugins.find(
+    (candidate) => candidate.key === route.plugin && candidate.state === "enabled",
+  );
+  const bound =
+    route.level === "workspace" ||
+    data.projectPlugins.some((candidate) => candidate.key === route.plugin);
+  const pages = plugin === undefined ? [] : pluginPagesAt(plugin, route.level);
+  const page = route.page === undefined ? pages[0] : pages.find((p) => p.key === route.page);
+  if (plugin === undefined || !bound || page === undefined || data.me === undefined) {
+    return <EmptyState title={words.plugins.noPage.title} body={words.plugins.noPage.body} />;
+  }
+  const projectKey = route.level === "project" ? route.project : undefined;
+  return (
+    <>
+      {pages.length > 1 && (
+        <nav className="sc-subtabs" aria-label={pluginWordOf(plugin.name, language)}>
+          {pages.map((candidate) => (
+            <a
+              key={candidate.key}
+              href={pluginHref(plugin.key, candidate.key, projectKey)}
+              className={candidate.key === page.key ? "sc-tab sc-tab-current" : "sc-tab"}
+              aria-current={candidate.key === page.key ? "page" : undefined}
+            >
+              {pluginWordOf(candidate.name, language)}
+            </a>
+          ))}
+        </nav>
+      )}
+      <PluginFrame
+        key={`${plugin.key}:${page.key}:${projectKey ?? ""}`}
+        plugin={plugin}
+        page={page.key}
+        project={project}
+        path={route.rest}
+        me={data.me}
+        language={language}
+        client={client}
+        navigation={navigation}
+        events={project === undefined ? undefined : data.events}
+        title={words.plugins.frame(pluginWordOf(page.name, language))}
+      />
     </>
   );
 }
 
+/**
+ * The plugins' settings (docs/specs/plugins.md, "The settings pages"): the list, or one plugin
+ * whole, read again after every change; for an administrator.
+ */
+function PluginSettingsPage(props: {
+  readonly plugin: string | undefined;
+  readonly data: ConsoleData;
+  readonly client: ConsoleClient;
+  readonly language: string;
+  readonly navigation: Navigation;
+}) {
+  const words = useWords();
+  const { data, client, language, navigation } = props;
+  const settings = words.plugins.settings;
+  const administrator = data.me?.person?.role === "admin";
+  const [detail, setDetail] = useState<RestPluginDetail | undefined>(undefined);
+  const [failure, setFailure] = useState<string | undefined>(undefined);
+  const key = props.plugin;
+  const read = useCallback(async () => {
+    if (key === undefined) {
+      return;
+    }
+    try {
+      setDetail(await client.plugin(key).get());
+      setFailure(undefined);
+    } catch (error) {
+      setFailure(error instanceof ApiError ? error.message : words.common.somethingWentWrong);
+    }
+  }, [client, key, words.common.somethingWentWrong]);
+  useEffect(() => {
+    setDetail(undefined);
+    void read();
+  }, [read]);
+  if (!administrator) {
+    return <NothingHere />;
+  }
+  if (key === undefined) {
+    return (
+      <>
+        <div className="sc-page-head">
+          <h1 className="sc-page-title">{settings.title}</h1>
+        </div>
+        <PluginSettingsList
+          plugins={data.plugins}
+          language={language}
+          href={(plugin) => pluginSettingsHref(plugin.key)}
+        />
+      </>
+    );
+  }
+  if (failure !== undefined) {
+    return <EmptyState title={words.common.somethingWentWrong} body={failure} />;
+  }
+  if (detail === undefined) {
+    return (
+      <div className="sc-loading">
+        <Spinner label={words.common.loading} />
+      </div>
+    );
+  }
+  return (
+    <PluginSettingsView
+      detail={detail}
+      projects={data.projects}
+      people={data.people}
+      language={language}
+      client={client}
+      onChanged={async () => {
+        await read();
+        await data.actions.refreshPlugins();
+      }}
+      onPurged={() => {
+        void data.actions.refreshPlugins();
+        navigation.replace(pluginSettingsHref());
+      }}
+    />
+  );
+}
+
 /**
  * The archive of the board (ADR-0029): the tasks put away, newest first, a page at a time from
  * the server, each brought back from here by whoever may work in the project.
@@ -700,9 +871,9 @@ function TaskPage(props: {
         })
       }
       onMove={(target, state) => void act(() => data.actions.updateTask(target.id, { state }))}
-      onRaiseDecision={(input) =>
+      onRaiseDecision={(input, files) =>
         void act(async () => {
-          await data.actions.raiseDecision(input);
+          await data.actions.raiseDecision(input, uploadsOf(files));
           navigation.replace(here);
         })
       }
@@ -726,14 +897,7 @@ function TaskPage(props: {
       }
       onComment={(draft) =>
         void act(async () => {
-          await data.actions.comment(task.id, {
-            body: draft.body,
-            files: draft.files.map((file) => ({
-              name: file.name,
-              bytes: file,
-              ...(file.type === "" ? {} : { contentType: file.type }),
-            })),
-          });
+          await data.actions.comment(task.id, { body: draft.body, files: uploadsOf(draft.files) });
           setComments(await taskComments(task.id));
         })
       }
@@ -747,6 +911,8 @@ function ProjectPage(props: {
   readonly data: ConsoleData;
   readonly components: ConsoleComponents;
   readonly navigation: Navigation;
+  readonly client: ConsoleClient;
+  readonly language: string;
 }) {
   const words = useWords();
   const { route, project, data, components, navigation } = props;
@@ -1146,6 +1312,7 @@ function ProjectPage(props: {
           tasks={tasksById}
           taskHref={href}
           docHref={toDoc}
+          fileHref={(fileId) => projectPath(key, "files", fileId)}
           decisionHref={(decision) => decisionHref(key, decision.id)}
           page={route.page}
           pageHref={(page) => decisionsHref(key, page)}
@@ -1172,9 +1339,9 @@ function ProjectPage(props: {
             deciders={data.members.map((member) => member.person)}
             me={data.me?.person ?? undefined}
             busy={busy}
-            onSubmit={(input: RestDecisionInput) =>
+            onSubmit={(input: RestDecisionInput, files: readonly File[]) =>
               void act(async () => {
-                const made = await data.actions.raiseDecision(input);
+                const made = await data.actions.raiseDecision(input, uploadsOf(files));
                 navigation.replace(decisionHref(key, made.id));
               })
             }
@@ -1201,6 +1368,7 @@ function ProjectPage(props: {
             task={decision.taskId === null ? undefined : tasksById.get(decision.taskId)}
             taskHref={href}
             docHref={toDoc}
+            fileHref={(fileId) => projectPath(key, "files", fileId)}
             onAnswer={onAnswer}
             onUpdate={onUpdate}
             busy={busy}
@@ -1313,6 +1481,18 @@ function ProjectPage(props: {
       <ProjectSettingsPage route={route} project={project} data={data} navigation={navigation} />
     );
   }
+  if (route.name === "plugin") {
+    return (
+      <PluginPage
+        route={route}
+        data={data}
+        project={project}
+        client={props.client}
+        language={props.language}
+        navigation={navigation}
+      />
+    );
+  }
   return <NothingHere />;
 }
 
@@ -1578,9 +1758,10 @@ function WorkspaceSettingsPage(props: {
   readonly form: "rules" | "workspace" | "pack-token" | undefined;
   readonly data: ConsoleData;
   readonly navigation: Navigation;
+  readonly language: string;
 }) {
   const words = useWords();
-  const { form, data, navigation } = props;
+  const { form, data, navigation, language } = props;
   const { busy, error, act } = useAction();
   const administrator = data.me?.person?.role === "admin";
   const workspace = data.me?.workspace;
@@ -1729,7 +1910,7 @@ function WorkspaceSettingsPage(props: {
               </a>
             )}
           </div>
-          <WorkspaceSettingsView workspace={workspace} />
+          <WorkspaceSettingsView workspace={workspace} console={data.me?.console} />
         </section>
       )}
       <section className="sc-panel" aria-label={words.rules.title}>
@@ -1753,6 +1934,20 @@ function WorkspaceSettingsPage(props: {
           />
         )}
       </section>
+      {administrator && (
+        <section className="sc-panel" aria-label={words.plugins.settings.title}>
+          <h2 className="sc-section-title">{words.plugins.settings.title}</h2>
+          {data.plugins.length === 0 ? (
+            <p className="sc-settings-hint">{words.plugins.settings.empty.body}</p>
+          ) : (
+            <PluginSettingsList
+              plugins={data.plugins}
+              language={language}
+              href={(plugin) => pluginSettingsHref(plugin.key)}
+            />
+          )}
+        </section>
+      )}
       <section className="sc-panel" aria-label={words.settings.categories}>
         <h2 className="sc-section-title">{words.settings.categories}</h2>
         {data.categories.length > 0 && (
@@ -2109,6 +2304,7 @@ function MyDecisionsPage(props: { readonly data: ConsoleData }) {
           addressed={{ items: addressed.items, more: addressed.more, onMore: addressed.readMore }}
           raised={{ items: raised.items, more: raised.more, onMore: raised.readMore }}
           decisionHref={decisionHref}
+          fileHref={(projectKey, fileId) => projectPath(projectKey, "files", fileId)}
           onAnswer={onAnswer}
           busy={busy || addressed.busy || raised.busy}
         />
@@ -2174,11 +2370,36 @@ function WorkspacePage(props: {
   readonly data: ConsoleData;
   readonly components: ConsoleComponents;
   readonly navigation: Navigation;
+  readonly client: ConsoleClient;
+  readonly language: string;
 }) {
   const words = useWords();
-  const { route, data, components, navigation } = props;
+  const { route, data, components, navigation, client, language } = props;
   const [fresh, setFresh] = useState<RestTokenCreated | undefined>(undefined);
   const { busy, error, act } = useAction();
+  if (route.name === "plugin" && route.level === "workspace") {
+    return (
+      <PluginPage
+        route={route}
+        data={data}
+        project={undefined}
+        client={client}
+        language={language}
+        navigation={navigation}
+      />
+    );
+  }
+  if (route.name === "plugins-settings") {
+    return (
+      <PluginSettingsPage
+        plugin={route.plugin}
+        data={data}
+        client={client}
+        language={language}
+        navigation={navigation}
+      />
+    );
+  }
 
   if (route.name === "work") {
     return <WorkPage data={data} components={components} week={route.week} />;
@@ -2190,7 +2411,14 @@ function WorkspacePage(props: {
     return <PersonWorkPage id={route.id} data={data} components={components} week={route.week} />;
   }
   if (route.name === "workspace-settings") {
-    return <WorkspaceSettingsPage form={route.form} data={data} navigation={navigation} />;
+    return (
+      <WorkspaceSettingsPage
+        form={route.form}
+        data={data}
+        navigation={navigation}
+        language={language}
+      />
+    );
   }
   if (route.name === "categories") {
     const me = data.me?.person ?? undefined;
@@ -2351,6 +2579,7 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
   const languages = config.languages ?? DEFAULT_LANGUAGES;
   const pages = config.pages ?? [];
 
+  // biome-ignore lint/correctness/noComponentHookFactories: createConsole runs once, when a console is built, never during a render; App is that console's one root component, closing over its config.
   function App(props: { readonly initialPath?: string | undefined }) {
     const { location, navigation } = useNavigation(props.initialPath);
     useFollowLinks(navigation);
@@ -2435,6 +2664,7 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
           href: PATHS.decisions,
           label: words.nav.myDecisions,
           current: route.name === "my-decisions",
+          count: data.me?.decisions?.waiting,
         },
         {
           href: PATHS.people,
@@ -2453,13 +2683,6 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
                 current: route.name === "agents" || route.name === "new-token",
               },
             ]),
-        // The settings are read by everyone: the rules every agent follows, the categories and
-        // what the colours mean, where the skills come from; kept by an administrator.
-        {
-          href: PATHS.settings,
-          label: words.nav.settings,
-          current: route.name === "workspace-settings" || route.name === "categories",
-        },
         ...pages
           .filter((candidate) => candidate.level === "workspace")
           .map((candidate) => ({
@@ -2470,6 +2693,28 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
               route.level === "workspace" &&
               route.page === candidate.key,
           })),
+        // The plugins' tabs (ADR-0054): the groups that hold a plugin the person has a page of.
+        ...pluginNavItems({
+          plugins: data.plugins,
+          level: "workspace",
+          current: {
+            plugin:
+              route.name === "plugin" && route.level === "workspace" ? route.plugin : undefined,
+          },
+          words,
+          language: pack.tag,
+        }),
+        // The settings are read by everyone: the rules every agent follows, the categories and
+        // what the colours mean, where the skills come from, the plugins; kept by an
+        // administrator. Last, after the organization's own tabs and the plugins'.
+        {
+          href: PATHS.settings,
+          label: words.nav.settings,
+          current:
+            route.name === "workspace-settings" ||
+            route.name === "categories" ||
+            route.name === "plugins-settings",
+        },
       ];
       const nav: NavItem[] =
         projectKey === undefined
@@ -2521,12 +2766,6 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
                 label: words.nav.members,
                 current: route.name === "members",
               },
-              // Read by every member: what the project is, and what its agents are asked (ADR-0023).
-              {
-                href: projectHref(projectKey, "settings"),
-                label: words.nav.settings,
-                current: route.name === "settings",
-              },
               ...pages
                 .filter((candidate) => candidate.level === "project")
                 .map((candidate) => ({
@@ -2537,6 +2776,24 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
                     route.level === "project" &&
                     route.page === candidate.key,
                 })),
+              ...pluginNavItems({
+                plugins: data.plugins,
+                level: "project",
+                project: { key: projectKey, plugins: data.projectPlugins },
+                current: {
+                  plugin:
+                    route.name === "plugin" && route.level === "project" ? route.plugin : undefined,
+                },
+                words,
+                language: pack.tag,
+              }),
+              // Read by every member: what the project is, and what its agents are asked
+              // (ADR-0023). Last, after the organization's own tabs and the plugins'.
+              {
+                href: projectHref(projectKey, "settings"),
+                label: words.nav.settings,
+                current: route.name === "settings",
+              },
             ];
       /** A page of the console's own at the address, or nothing there. */
       const customPageOf = (key: string, level: CustomPage["level"]): ReactNode => {
@@ -2562,6 +2819,8 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
             data={data}
             components={components}
             navigation={navigation}
+            client={client}
+            language={pack.tag}
             making={route.name === "new-project"}
           />
         );
@@ -2574,6 +2833,8 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
             data={data}
             components={components}
             navigation={navigation}
+            client={client}
+            language={pack.tag}
           />
         );
       } else if (data.projectError !== undefined) {
@@ -2600,6 +2861,8 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
             data={data}
             components={components}
             navigation={navigation}
+            client={client}
+            language={pack.tag}
           />
         );
       }
@@ -2632,7 +2895,17 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
             route.name === "calendar" ||
             (route.name === "goal" && route.form === undefined) ||
             (route.name === "custom" &&
-              pages.some((candidate) => candidate.key === route.page && candidate.wide === true))
+              pages.some((candidate) => candidate.key === route.page && candidate.wide === true)) ||
+            (route.name === "plugin" &&
+              data.plugins.some(
+                (candidate) =>
+                  candidate.key === route.plugin &&
+                  pluginPagesAt(candidate, route.level).some(
+                    (candidate, index) =>
+                      candidate.wide &&
+                      (route.page === undefined ? index === 0 : candidate.key === route.page),
+                  ),
+              ))
           }
           onNavigate={(href) => navigation.go(href)}
           onSignOut={viaToken ? undefined : () => void data.actions.signOut()}