@anchrd/intel-ui 0.8.8 → 0.9.0

package/src/agent/agent.tsx

@@ -0,0 +1,361 @@
+import type { AgentDefinition, AgentScheduleTarget, Node } from "@anchrd/intel-contract";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Pause, Play } from "lucide-react";
+import { useState } from "react";
+import { AgentCalendar } from "@/agent/agent-calendar/agent-calendar.tsx";
+import { AgentChat } from "@/agent/agent-chat/agent-chat.tsx";
+import { nextRunAt, useAgentDefinition } from "@/agent/agent-definition/agent-definition.ts";
+import { useEntryTitle } from "@/agent/agent-entry-title/agent-entry-title.ts";
+import { AgentLog } from "@/agent/agent-log/agent-log.tsx";
+import { AgentProfile } from "@/agent/agent-profile/agent-profile.tsx";
+import {
+  agentAccessDenied,
+  agentRuntimeMissing,
+  agentStateKey,
+  useAgentState,
+} from "@/agent/agent-state/agent-state.ts";
+import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useCapabilities } from "@/hooks/use-capabilities.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+const tabs = ["profile", "chat", "calendar", "log"] as const;
+type Tab = (typeof tabs)[number];
+
+/**
+ * The agent's page: the lower of the shell's two bars, carrying this one agent's four views.
+ *
+ * ⚠️ The name, the menu, the status line and the two head actions all live in the SAME title line —
+ * the one `TitleRow` draws for every open thing (#53). The status and the actions are portalled
+ * into its slots rather than drawn again here, because an agent with a header of its own would be
+ * the one kind of file whose rename sits somewhere else.
+ *
+ * ⚠️ One state query stands for the whole page, and it is also how the page learns whether this
+ * reader may drive this agent at all: `/session` carries identity and no capabilities on purpose, so
+ * a 403 from the runtime door is the only place the answer exists (#178). It is then rendered as an
+ * answer — a sentence in the two tabs that would have needed it — rather than as a red failure.
+ */
+export function AgentPanel({ node }: { node: Node }) {
+  const { i18n } = useIntelRouterContext();
+  const [tab, setTab] = useState<Tab>("profile");
+  const agent = useAgentDefinition(node.id);
+  const state = useAgentState(node.id);
+  const denied = agentAccessDenied(state.error);
+  const capabilities = useCapabilities();
+
+  // An installation without an agent runtime (#190): the node from an earlier deployment still
+  // opens, but it explains itself instead of rendering four views whose every call would end in a
+  // 503. `/capabilities` is the answer; the probe's own `agent_runtime_not_configured` is the belt
+  // to that brace. ⚠️ Only an explicit `false` takes the page away — while the answer is still
+  // loading the tabs stand, because tearing down a rendered page over a pending request would blank
+  // the screen for every agent on every load.
+  if (capabilities.data?.agentRuntime === false || agentRuntimeMissing(state.error)) {
+    return <NoRuntime />;
+  }
+
+  return (
+    <>
+      <ActionSlot name="title-meta">
+        <AgentStatus agentId={node.id} definition={agent.definition} />
+      </ActionSlot>
+      <ActionSlot name="title-actions">
+        <AgentActions agentId={node.id} definition={agent.definition} />
+      </ActionSlot>
+      <Tabs
+        value={tab}
+        onValueChange={(value) => setTab(value as Tab)}
+        className="flex min-h-0 flex-1 flex-col gap-0"
+      >
+        {/* The file-specific bar. It stands under the title line and above the view it switches —
+            the order the flow screen's own switch already uses (#19). */}
+        <div className="border-b px-6 py-2">
+          <TabsList aria-label={i18n.t("agent.tabs")}>
+            {tabs.map((name) => (
+              <TabsTrigger key={name} value={name}>
+                {i18n.t(`agent.tab.${name}`)}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+        <TabsContent value="profile" className="flex min-h-0 flex-col">
+          <AgentProfile node={node} agent={agent} />
+        </TabsContent>
+        {/* ⚠️ Each of the three below is mounted only while its own tab is open. The chat is the
+            reason: it holds a live SSE connection, and one kept open behind three other views is a
+            stream nobody is reading. The other two follow so that a switch back re-reads rather
+            than showing a run list from ten minutes ago. */}
+        <TabsContent value="chat" className="flex min-h-0 flex-col">
+          {tab === "chat" ? denied ? <NotForYou /> : <AgentChat agentId={node.id} /> : null}
+        </TabsContent>
+        <TabsContent value="calendar" className="flex min-h-0 flex-col">
+          {tab === "calendar" ? (
+            <AgentCalendar definition={agent.definition} now={new Date()} />
+          ) : null}
+        </TabsContent>
+        <TabsContent value="log" className="flex min-h-0 flex-col">
+          {tab === "log" ? denied ? <NotForYou /> : <AgentLog agentId={node.id} /> : null}
+        </TabsContent>
+      </Tabs>
+    </>
+  );
+}
+
+/**
+ * What somebody without `agents/run` sees instead of the chat and the log.
+ *
+ * ⚠️ Muted text, not `role="alert"` and not the destructive colour. Nothing is broken and there is
+ * nothing to retry: they may read this agent, they may not drive it. A red box would send them to
+ * whoever runs the installation over a working system.
+ */
+function NotForYou() {
+  const { i18n } = useIntelRouterContext();
+  return (
+    <p className="m-auto max-w-md px-6 py-5 text-center text-sm text-muted-foreground">
+      {i18n.t("agent.notPermitted")}
+    </p>
+  );
+}
+
+/**
+ * What an agent node from an earlier deployment shows where no runtime is configured (#190).
+ *
+ * ⚠️ The same muted sentence as `NotForYou`, and for the same reason: nothing is broken and there
+ * is nothing to retry. The node and its definition are intact; the installation simply does not run
+ * agents, which is the operator's choice, not the reader's problem to debug.
+ */
+function NoRuntime() {
+  const { i18n } = useIntelRouterContext();
+  return (
+    <p className="m-auto max-w-md px-6 py-5 text-center text-sm text-muted-foreground">
+      {i18n.t("agent.noRuntime")}
+    </p>
+  );
+}
+
+/**
+ * Whether the agent is working, whether it is switched off, and when it next will be.
+ *
+ * ⚠️ "Running" is read from the runtime's own run list, and its absence is NOT read as "idle" — a
+ * runtime that cannot be reached says nothing about what the agent is doing, and a status line that
+ * quietly reported "idle" for an unreachable runtime would be wrong exactly when it matters.
+ *
+ * ⚠️ "Next run" is derived from the cron expressions rather than asked. The runtime arms one alarm
+ * and publishes neither it nor a schedule, so this is the same reading `AgentCalendar` does — and
+ * while the agent is paused it is not shown at all, because a paused agent will not run then.
+ */
+export function AgentStatus({
+  agentId,
+  definition,
+}: {
+  agentId: string;
+  definition: AgentDefinition | null;
+}) {
+  const { data, i18n } = useIntelRouterContext();
+  const state = useAgentState(agentId);
+  const runs = useQuery({
+    queryKey: ["agent-runs", agentId],
+    queryFn: () => data.listAgentRuns(agentId),
+    // A status line is not worth a red screen: the runtime being unreachable is reported by the
+    // Log tab, which is the view that is actually about runs.
+    retry: false,
+  });
+  const running = runs.data?.items.some((run) => run.status === "running") ?? false;
+  const paused = state.data?.paused ?? false;
+  const next = nextRunAt(definition, new Date());
+  const parts = [
+    runs.isError
+      ? i18n.t("agent.statusUnknown")
+      : paused
+        ? i18n.t("agent.statusPaused")
+        : running
+          ? i18n.t("agent.statusRunning")
+          : i18n.t("agent.statusIdle"),
+    paused
+      ? i18n.t("agent.pausedNoRuns")
+      : next
+        ? i18n.t("agent.nextRun", {
+            when: new Intl.DateTimeFormat(i18n.locale, {
+              dateStyle: "medium",
+              timeStyle: "short",
+              timeZone: "UTC",
+            }).format(next),
+          })
+        : i18n.t("agent.noNextRun"),
+  ];
+  return <span>{parts.join(" · ")}</span>;
+}
+
+/**
+ * Pause, and run now.
+ *
+ * ⚠️ Both are shown even where they cannot be used, against this repo's usual rule that an
+ * inapplicable action is absent. The rule is about actions that do not APPLY to a kind — a folder
+ * has no retrieval mode. These two apply to every agent, and a head that quietly dropped them would
+ * hide from the reader that the agent can be stopped at all. Disabled always carries its reason on
+ * the screen, pointed at by `aria-describedby`, so the keyboard hears it too.
+ *
+ * ⚠️ "Run now" fires a schedule the agent already has; it does not invent one. A run acts with the
+ * AGENT's Gate token, so a free choice of target here would let anybody who may drive the agent read
+ * with its grants instead of their own — the runtime refuses an undeclared target for that reason,
+ * and this menu offers only what it would accept.
+ */
+export function AgentActions({
+  agentId,
+  definition,
+}: {
+  agentId: string;
+  definition: AgentDefinition | null;
+}) {
+  const { data, i18n } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  const state = useAgentState(agentId);
+  const denied = agentAccessDenied(state.error);
+  const paused = state.data?.paused ?? false;
+
+  const toggle = useMutation({
+    mutationFn: async () =>
+      paused ? await data.resumeAgent(agentId) : await data.pauseAgent(agentId),
+    // The answer is the new state, so the cache is set from it rather than refetched: a round trip
+    // would leave a window in which the button still offers what was just done.
+    onSuccess: (next) => queryClient.setQueryData(agentStateKey(agentId), next),
+  });
+  const runNow = useMutation({
+    mutationFn: async (target: AgentScheduleTarget) => await data.runAgentNow(agentId, target),
+    // The run is worked off the runtime's alarm, so it appears in the list rather than in this
+    // answer. Invalidating is what puts it on the Log tab and in the status line.
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["agent-runs", agentId] }),
+  });
+
+  const targets = definition?.schedules.map((schedule) => schedule.target) ?? [];
+  const reason = denied
+    ? i18n.t("agent.notPermitted")
+    : state.isError
+      ? i18n.t("agent.statusUnknown")
+      : null;
+  const runReason =
+    reason ??
+    (paused
+      ? i18n.t("agent.runNowPaused")
+      : targets.length === 0
+        ? i18n.t("agent.runNowNoTarget")
+        : null);
+  const failure = toggle.error ?? runNow.error;
+
+  return (
+    <span className="flex items-center gap-2">
+      {/* ⚠️ `sr-only` rather than `hidden` where the bar is narrow. A disabled control whose reason
+          is `display: none` has no reason at all for a screen reader — the element it points at is
+          not in the accessibility tree. */}
+      {runReason ? (
+        <span
+          id="agent-actions-reason"
+          className="text-xs text-muted-foreground max-sm:sr-only sm:inline"
+        >
+          {runReason}
+        </span>
+      ) : null}
+      {failure ? (
+        <span role="alert" className="text-xs text-destructive max-sm:sr-only sm:inline">
+          {i18n.t("agent.actionFailed")}
+        </span>
+      ) : null}
+      <button
+        type="button"
+        onClick={() => toggle.mutate()}
+        disabled={reason !== null || state.isPending || toggle.isPending}
+        aria-busy={toggle.isPending}
+        {...(reason ? { "aria-describedby": "agent-actions-reason" } : {})}
+        className="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+      >
+        {paused ? (
+          <Play aria-hidden="true" className="size-4" />
+        ) : (
+          <Pause aria-hidden="true" className="size-4" />
+        )}
+        {i18n.t(paused ? "agent.resume" : "agent.pause")}
+      </button>
+      <RunNow
+        targets={targets}
+        disabled={runReason !== null || runNow.isPending}
+        busy={runNow.isPending}
+        describedBy={runReason ? "agent-actions-reason" : undefined}
+        start={(target) => runNow.mutate(target)}
+      />
+    </span>
+  );
+}
+
+/**
+ * ⚠️ One schedule runs straight away; several open a menu. A button that silently picked the first
+ * of three targets would run the wrong thing at a moment somebody chose deliberately, and a menu in
+ * front of a single obvious target is a click that answers nothing.
+ */
+function RunNow({
+  targets,
+  disabled,
+  busy,
+  describedBy,
+  start,
+}: {
+  targets: AgentScheduleTarget[];
+  disabled: boolean;
+  busy: boolean;
+  describedBy: string | undefined;
+  start(target: AgentScheduleTarget): void;
+}) {
+  const { i18n } = useIntelRouterContext();
+  const only = targets.length === 1 ? targets[0] : undefined;
+  const className =
+    "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50";
+
+  if (targets.length > 1) {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            disabled={disabled}
+            aria-busy={busy}
+            {...(describedBy ? { "aria-describedby": describedBy } : {})}
+            className={className}
+          >
+            <Play aria-hidden="true" className="size-4" />
+            {i18n.t("agent.runNow")}
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {targets.map((target) => (
+            <DropdownMenuItem key={`${target.kind}:${target.id}`} onSelect={() => start(target)}>
+              <TargetLabel target={target} />
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => only && start(only)}
+      disabled={disabled || !only}
+      aria-busy={busy}
+      {...(describedBy ? { "aria-describedby": describedBy } : {})}
+      className={className}
+    >
+      <Play aria-hidden="true" className="size-4" />
+      {i18n.t("agent.runNow")}
+    </button>
+  );
+}
+
+function TargetLabel({ target }: { target: AgentScheduleTarget }) {
+  const { title } = useEntryTitle(target.id, target.kind === "flow");
+  return <span className="truncate">{title}</span>;
+}

package/src/app/app-sidebar/app-sidebar.tsx

@@ -16,7 +16,7 @@ import {
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
 // One tree is the whole navigation: documents and flows side by side in the folder they share, with
-// no Knowledge or Flows entry above them (ADR-0004). Tools stay below, next to the user, because
+// no Intelligence or Flows entry above them (ADR-0004). Tools stay below, next to the user, because
 // they come live from the portal and have no tree.
 export function AppSidebar({
   width,
@@ -45,7 +45,7 @@ export function AppSidebar({
             <SidebarMenu>
               <SidebarMenuItem>
                 <SidebarMenuButton size="lg" asChild>
-                  <Link to="/knowledge">
+                  <Link to="/nodes">
                     <AppLogo className="size-8" />
                     <span className="font-semibold">{i18n.t("app.name")}</span>
                   </Link>