@anchrd/intel-ui 0.9.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

package/src/agent/agent-profile/agent-profile.tsx

@@ -6,7 +6,7 @@ import {
   type Node,
 } from "@anchrd/intel-contract";
 import { useQuery } from "@tanstack/react-query";
-import { Check, Copy, MessageSquare, Plus, Trash2, Wrench } from "lucide-react";
+import { Check, Copy, Info, MessageSquare, Plus, Trash2, Wrench } from "lucide-react";
 import { useState } from "react";
 import type { AgentDefinitionHandle } from "@/agent/agent-definition/agent-definition.ts";
 import { useEntryTitle } from "@/agent/agent-entry-title/agent-entry-title.ts";
@@ -18,11 +18,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { agentMcpAddress } from "@/data/agent-runtime/agent-runtime.ts";
 import { EntryPicker, type PickerKind } from "@/entry-picker/entry-picker.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
+// No dividers between sections — the space is the separation (#204). The explanation sits behind
+// the icon rather than under the title, so the page shows what the agent IS and keeps the prose
+// for whoever asks.
 function Section({
   title,
   hint,
@@ -33,14 +37,36 @@ function Section({
   children: React.ReactNode;
 }) {
   return (
-    <section aria-label={title} className="border-b px-6 py-5 last:border-b-0">
-      <h3 className="text-sm font-semibold">{title}</h3>
-      {hint ? <p className="mt-1 max-w-2xl text-xs text-muted-foreground">{hint}</p> : null}
+    <section aria-label={title} className="px-6 py-7">
+      <div className="flex items-center gap-1.5">
+        <h3 className="text-sm font-semibold">{title}</h3>
+        {hint ? <SectionHint hint={hint} /> : null}
+      </div>
       <div className="mt-3">{children}</div>
     </section>
   );
 }
 
+// ⚠️ The hint is the trigger's accessible name, not only the tooltip's content: Radix describes the
+// trigger by the content only while it is open, and a listener who tabs past a nameless icon button
+// would never learn there is anything behind it.
+function SectionHint({ hint }: { hint: string }) {
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger
+          type="button"
+          aria-label={hint}
+          className="rounded-full text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Info aria-hidden="true" className="size-3.5" />
+        </TooltipTrigger>
+        <TooltipContent className="max-w-xs">{hint}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
 /**
  * Everything an agent is, on one page: how to reach it, what it reads, what it may call, when it
  * acts on its own, and which model does the thinking.
@@ -151,20 +177,31 @@ function ContactSection({ node }: { node: Node }) {
           </button>
         </li>
       </ul>
-      {/* ⚠️ Disabled, and the reason is written rather than hovered. A mail contact is deployment
-          configuration (`AGENT_MAILBOXES`) and deliberately not part of the definition — ADR-0005
-          §4 — so a working button here would write a field the runtime never reads. */}
+      {/* ⚠️ Disabled, with the reason behind a hover rather than on the page (#204). A mail contact
+          is deployment configuration (`AGENT_MAILBOXES`) and deliberately not part of the definition
+          — ADR-0005 §4 — so a working button here would write a field the runtime never reads. The
+          span carries the tooltip because a disabled button swallows the pointer events the trigger
+          listens for; the sr-only copy keeps the reason where `aria-describedby` points. */}
       <div className="mt-3">
-        <button
-          type="button"
-          disabled
-          aria-describedby="agent-contact-add-reason"
-          className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm disabled:opacity-50"
-        >
-          <Plus aria-hidden="true" className="size-4" />
-          {i18n.t("agent.contactAdd")}
-        </button>
-        <p id="agent-contact-add-reason" className="mt-1.5 text-xs text-muted-foreground">
+        <TooltipProvider delayDuration={300}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex">
+                <button
+                  type="button"
+                  disabled
+                  aria-describedby="agent-contact-add-reason"
+                  className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm disabled:opacity-50"
+                >
+                  <Plus aria-hidden="true" className="size-4" />
+                  {i18n.t("agent.contactAdd")}
+                </button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent className="max-w-xs">{i18n.t("agent.contactAddReason")}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+        <p id="agent-contact-add-reason" className="sr-only">
           {i18n.t("agent.contactAddReason")}
         </p>
       </div>
@@ -196,9 +233,8 @@ function KnowledgeSection({
 
   return (
     <Section title={i18n.t("agent.knows")} hint={i18n.t("agent.knowsHint")}>
-      {definition.references.length === 0 ? (
-        <p className="text-sm text-muted-foreground">{i18n.t("agent.knowsEmpty")}</p>
-      ) : (
+      {/* An empty list shows nothing at all — the add button says what belongs here (#204). */}
+      {definition.references.length === 0 ? null : (
         <ul className="space-y-2">
           {/* ⚠️ The position IS the identity here: `references` is an ordered array with no ids,
               the contract permits the same folder twice, and every edit below addresses a row by
@@ -331,9 +367,10 @@ function ToolsSection() {
         <p role="alert" className="text-sm text-destructive">
           {i18n.t("tools.unreachableHelp")}
         </p>
-      ) : catalog.data && catalog.data.items.length === 0 ? (
-        <p className="text-sm text-muted-foreground">{i18n.t("tools.emptyHelp")}</p>
-      ) : (
+      ) : catalog.data &&
+        catalog.data.items.length ===
+          0 ? // Nothing rather than a paragraph (#204); the Tools screen still explains the empty catalog.
+      null : (
         <ul className="flex flex-wrap gap-2">
           {catalog.data?.items.map((tool) => (
             <li
@@ -372,9 +409,7 @@ function ScheduleSection({
 
   return (
     <Section title={i18n.t("agent.schedule")} hint={i18n.t("agent.scheduleHint")}>
-      {definition.schedules.length === 0 ? (
-        <p className="text-sm text-muted-foreground">{i18n.t("agent.scheduleEmpty")}</p>
-      ) : (
+      {definition.schedules.length === 0 ? null : (
         <ul className="space-y-2">
           {definition.schedules.map((schedule, index) => (
             <li

package/src/i18n/en.json

@@ -308,7 +308,6 @@
   "agent.contactAddReason": "A mail address belongs to the installation, not to the agent's definition, so it is configured where the runtime is deployed.",
   "agent.knows": "What it knows",
   "agent.knowsHint": "The folders this agent reads, and what each one counts as. A system message instructs it, semantic context is searched, memory is written back to.",
-  "agent.knowsEmpty": "This agent reads nothing yet.",
   "agent.addReference": "Add folder",
   "agent.removeReferenceOf": "Stop reading {title}",
   "agent.pickFolder": "Folder to read",

package/src/nodes/nodes.tsx

@@ -114,6 +114,7 @@ export function Nodes() {
               description={selected.description}
               target={{ type: "node", node: selected }}
               leading={selected.kind === "agent" ? <AgentAvatar title={selected.title} /> : null}
+              divider={selected.kind !== "agent"}
             >
               {selected.kind !== "folder" && (
                 <TooltipProvider delayDuration={300}>

package/src/title-row/title-row.tsx

@@ -21,6 +21,7 @@ export function TitleRow({
   description,
   target,
   leading,
+  divider = true,
   children,
 }: {
   title: string;
@@ -30,10 +31,15 @@ export function TitleRow({
   // prop rather than another slot because it must sit BEFORE the title, and a portal can only
   // append — the same limitation that gave the shell two boxes instead of one list (#56).
   leading?: React.ReactNode;
+  // Off for the one kind whose next line is its own tab bar: two rules a few pixels apart read as
+  // clutter, so the agent page keeps only the tab bar's (#204).
+  divider?: boolean;
   children?: React.ReactNode;
 }) {
   return (
-    <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
+    <div
+      className={`flex items-start justify-between gap-5 px-6 py-4${divider ? " border-b" : ""}`}
+    >
       <div className="flex min-w-0 items-center gap-3">
         {leading}
         <div className="min-w-0">