@skillcdn/console 0.4.1 → 0.4.2

package/src/components/shell.tsx

@@ -13,6 +13,8 @@ export interface NavItem {
   readonly current: boolean;
   /** A count beside the label: the decisions waiting, for example. */
   readonly count?: number | undefined;
+  /** The pages the tab opens a list of, as a group of plugins does (ADR-0054); the tab itself leads to the first. */
+  readonly children?: readonly NavItem[] | undefined;
 }
 
 /** The addresses of a brand's marks (ADR-0013): shown beside the workspace's name, and above it when signing in. */
@@ -67,6 +69,68 @@ export function isPlainClick(event: {
   return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
 }
 
+/** A tab that opens a list of pages, as a group of several plugins does: a details, as the person's menu is. Closes once used. */
+function TabGroup(props: { readonly item: NavItem; readonly onNavigate: (href: string) => void }) {
+  const details = useRef<HTMLDetailsElement>(null);
+  useEffect(() => {
+    const onClick = (event: MouseEvent) => {
+      const element = details.current;
+      if (
+        element?.open === true &&
+        !(event.target instanceof Node && element.contains(event.target))
+      ) {
+        element.open = false;
+      }
+    };
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, []);
+  const { item } = props;
+  return (
+    <details className="sc-tab-group" ref={details}>
+      <summary
+        className={cx("sc-tab", "sc-tab-summary", item.current && "sc-tab-current")}
+        aria-current={item.current ? "page" : undefined}
+      >
+        {item.label}
+        <svg className="sc-menu-caret" viewBox="0 0 16 16" aria-hidden="true">
+          <path
+            d="M4 6l4 4 4-4"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </summary>
+      <div className="sc-menu-panel sc-tab-group-panel">
+        <div className="sc-menu-list">
+          {(item.children ?? []).map((child) => (
+            <a
+              key={child.href}
+              href={child.href}
+              className="sc-menu-link"
+              aria-current={child.current ? "page" : undefined}
+              onClick={(event) => {
+                if (isPlainClick(event)) {
+                  event.preventDefault();
+                  if (details.current !== null) {
+                    details.current.open = false;
+                  }
+                  props.onNavigate(child.href);
+                }
+              }}
+            >
+              {child.label}
+            </a>
+          ))}
+        </div>
+      </div>
+    </details>
+  );
+}
+
 /** The person's menu: who they are, the workspace's pages, the languages, and the way out. Closes once used. */
 function PersonMenu(props: {
   readonly person: RestPerson;
@@ -296,20 +360,24 @@ export function Shell(props: ShellProps) {
         {props.nav.length > 0 && (
           <nav ref={tabs} className="sc-tabs" aria-label={words.shell.pages}>
             <div className="sc-tabs-inner">
-              {props.nav.map((item) => (
-                <a
-                  key={item.href}
-                  href={item.href}
-                  className={cx("sc-tab", item.current && "sc-tab-current")}
-                  aria-current={item.current ? "page" : undefined}
-                  onClick={follow(item.href)}
-                >
-                  {item.label}
-                  {item.count !== undefined && item.count > 0 && (
-                    <span className="sc-nav-count">{item.count}</span>
-                  )}
-                </a>
-              ))}
+              {props.nav.map((item) =>
+                item.children !== undefined && item.children.length > 0 ? (
+                  <TabGroup key={item.href} item={item} onNavigate={props.onNavigate} />
+                ) : (
+                  <a
+                    key={item.href}
+                    href={item.href}
+                    className={cx("sc-tab", item.current && "sc-tab-current")}
+                    aria-current={item.current ? "page" : undefined}
+                    onClick={follow(item.href)}
+                  >
+                    {item.label}
+                    {item.count !== undefined && item.count > 0 && (
+                      <span className="sc-nav-count">{item.count}</span>
+                    )}
+                  </a>
+                ),
+              )}
             </div>
           </nav>
         )}

package/src/components/workspace.tsx

@@ -2,6 +2,7 @@ import { type FormEvent, useId, useMemo, useState } from "react";
 import {
   PEOPLE_VISIBILITIES,
   type PeopleVisibility,
+  type RestMe,
   type RestWorkspace,
   type RestWorkspacePatch,
   WEEK_STARTS,
@@ -117,6 +118,12 @@ const labelOf = (zone: TimeZoneOption): string =>
 
 export interface WorkspaceSettingsViewProps {
   readonly workspace: RestWorkspace;
+  /**
+   * The console's version with the range of command versions it takes, as `GET /api/v1/me`
+   * says them (ADR-0025): shown first, so that whoever keeps the agents' commands up to date
+   * reads here which console they must match. Left out, nothing is said.
+   */
+  readonly console?: RestMe["console"];
 }
 
 /** The settings as they stand, one row each; where they are changed is the page's business. */
@@ -128,6 +135,17 @@ export function WorkspaceSettingsView(props: WorkspaceSettingsViewProps) {
   const offset = zone === undefined ? undefined : offsetOf(zone, new Date());
   return (
     <dl className="sc-settings-list">
+      {props.console !== undefined && (
+        <div className="sc-settings-item">
+          <dt>{settings.consoleVersion}</dt>
+          <dd>
+            {props.console.version}
+            <span className="sc-settings-note">
+              {settings.consoleTakes(props.console.clientRange)}
+            </span>
+          </dd>
+        </div>
+      )}
       <div className="sc-settings-item">
         <dt>{settings.peopleVisibility}</dt>
         <dd>{words.vocabulary.peopleVisibility[peopleVisibilityOf(props.workspace)]}</dd>

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,
@@ -393,11 +399,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 +437,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 +473,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.
@@ -747,6 +910,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;
@@ -1313,6 +1478,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 +1755,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 +1907,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 +1931,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 && (
@@ -2174,11 +2366,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 +2407,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;
@@ -2453,13 +2677,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 +2687,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 +2760,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 +2770,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 +2813,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 +2827,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 +2855,8 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
             data={data}
             components={components}
             navigation={navigation}
+            client={client}
+            language={pack.tag}
           />
         );
       }
@@ -2632,7 +2889,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()}