@anchrd/intel-ui 0.18.0 → 0.19.0

package/src/import-bundle/import-bundle.tsx

@@ -0,0 +1,152 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { zipSync } from "fflate";
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { treeLevelKey } from "@/app/tree-move/tree-move.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * The reading half of the bundle round trip (#136/#137), as one seam two menus share.
+ *
+ * ⚠️ Import is offered in two places and they are not alternatives: the three-dot menu of a folder
+ * files into that folder, and the tree's root button is the ONLY way to reach the top level — a
+ * three-dot menu always has a resource, and the root is not one (#346). Both need the same file
+ * inputs, the same 64 MB refusal and the same invalidations, and a second copy of that is how the
+ * two start disagreeing about what a successful import makes stale.
+ */
+export type ImportKind = "importZip" | "importFolder";
+
+// The server refuses anything larger anyway (#137); refusing here saves uploading it first.
+const MaxImportBytes = 64 * 1024 * 1024;
+
+// A picked directory as the zip the import endpoint reads. `webkitRelativePath` carries the folder
+// structure, with the picked folder itself as the first segment — kept, so the folder lands as a
+// folder rather than spilling its contents into the target.
+async function zipOfDirectory(files: readonly File[]): Promise<Blob> {
+  const entries: Record<string, Uint8Array> = {};
+  let total = 0;
+  for (const file of files) {
+    const path = file.webkitRelativePath || file.name;
+    total += file.size;
+    if (total > MaxImportBytes) throw new Error("Import exceeds the 64 MB limit");
+    entries[path] = new Uint8Array(await file.arrayBuffer());
+  }
+  return new Blob([zipSync(entries).slice().buffer], { type: "application/zip" });
+}
+
+export interface BundleImport {
+  /** Opens the file picker for `kind` and files whatever comes back into `parentId`. */
+  start(parentId: string | null, kind: ImportKind): void;
+  /**
+   * The two hidden file pickers. Render once inside the component that called the hook.
+   *
+   * ⚠️ They portal to `document.body` rather than landing where they are written. A file input is
+   * invisible but still an element, and the three-dot menu sits at the end of a title line whose
+   * rule is that the menu is the LAST thing in it (#53) — an input after it breaks that rule for
+   * nobody's benefit, because a hidden picker has no place on screen to be in the first place.
+   *
+   * ⚠️ `tabIndex={-1}`, and that is not a detail. The folder table renders one `ResourceMenu` PER
+   * ROW, so a folder holding twenty folders holds forty of these — and `sr-only` hides an element
+   * from the eye, never from the tab order. Without it, tabbing through such a screen walks through
+   * forty stops that show nothing, and #346 asks every entry to have a VISIBLE focus. The control
+   * that opens a picker is the menu item; the input is the mechanism behind it and is clicked by
+   * `start`, never by a person.
+   */
+  inputs: React.ReactNode;
+  isError: boolean;
+}
+
+export function useBundleImport(options: {
+  /**
+   * Where this pair of pickers files, in words — a folder title, or the name of the top level.
+   *
+   * ⚠️ Not decoration. Both callers render their inputs into `document.body`, so on a folder screen
+   * there are two of each in the document at once: the tree's (which files at the top level) and
+   * this menu's. `sr-only` keeps them out of sight but not out of the accessibility tree or the tab
+   * order, and two controls called "Import zip bundle" are two controls a reader cannot tell apart
+   * — nor, as the first browser run of #388 showed, can anything else looking one up by name.
+   */
+  where: string;
+  onImported?(parentId: string | null): void | Promise<void>;
+}): BundleImport {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const queryClient = useQueryClient();
+  const [importTo, setImportTo] = useState<string | null>(null);
+  const zipInput = useRef<HTMLInputElement>(null);
+  const folderInput = useRef<HTMLInputElement>(null);
+
+  // One import, one request, one answer (#137): the server creates the whole subtree or nothing, so
+  // this mutation never has a partial state to clean up after — unlike the attachment upload, whose
+  // two steps can strand a node.
+  const importBundle = useMutation({
+    mutationFn: async ({ parentId, zip }: { parentId: string | null; zip: Blob }) => {
+      if (zip.size > MaxImportBytes) throw new Error("Import exceeds the 64 MB limit");
+      const result = await data.importNodeBundle({
+        nodeId: parentId,
+        zip,
+        idempotencyKey: crypto.randomUUID(),
+      });
+      return { parentId, result };
+    },
+    onSuccess: async (imported) => {
+      await options.onImported?.(imported.parentId);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: treeLevelKey(imported.parentId) }),
+        queryClient.invalidateQueries({ queryKey: ["node-graph"] }),
+        // The graph view of that same level draws exactly this list (#19).
+        queryClient.invalidateQueries({ queryKey: ["relation-graph"] }),
+        // A bundle can carry flows, so the flow collections go stale alongside the node ones.
+        queryClient.invalidateQueries({ queryKey: ["flows"] }),
+      ]);
+    },
+  });
+
+  return {
+    start(parentId, kind) {
+      setImportTo(parentId);
+      (kind === "importZip" ? zipInput : folderInput).current?.click();
+    },
+    isError: importBundle.isError,
+    inputs: createPortal(
+      <>
+        <input
+          ref={zipInput}
+          type="file"
+          tabIndex={-1}
+          accept=".zip,application/zip"
+          className="sr-only"
+          aria-label={i18n.t("tree.importZipInto", { where: options.where })}
+          onChange={(event) => {
+            const file = event.target.files?.[0];
+            if (file) importBundle.mutate({ parentId: importTo, zip: file });
+            event.currentTarget.value = "";
+          }}
+        />
+        {/* `webkitdirectory` is the one way a browser hands over a folder; React does not know the
+            attribute, so it is spread past the type checker rather than invented as a prop. */}
+        <input
+          ref={folderInput}
+          type="file"
+          tabIndex={-1}
+          multiple
+          {...({ webkitdirectory: "" } as object)}
+          className="sr-only"
+          aria-label={i18n.t("tree.importFolderInto", { where: options.where })}
+          onChange={(event) => {
+            const files = Array.from(event.target.files ?? []);
+            const parentId = importTo;
+            if (files.length > 0) {
+              void zipOfDirectory(files)
+                .then((zip) => importBundle.mutate({ parentId, zip }))
+                .catch(() => importBundle.mutate({ parentId, zip: new Blob([]) }));
+            }
+            event.currentTarget.value = "";
+          }}
+        />
+      </>,
+      document.body,
+    ),
+  };
+}

package/src/kind-icon.ts

@@ -1,13 +1,4 @@
-import {
-  Bot,
-  FileText,
-  Folder,
-  KanbanSquare,
-  type LucideIcon,
-  Paperclip,
-  Table,
-  Workflow,
-} from "lucide-react";
+import { FileText, Folder, type LucideIcon, Paperclip, Table, Workflow } from "lucide-react";
 import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
 
 /**
@@ -24,10 +15,5 @@ export const kindIcons: Record<TreeEntry["kind"], LucideIcon> = {
   document: FileText,
   attachment: Paperclip,
   table: Table,
-  // An agent is listed and named like any other row (#139), and since #143 opening one leads to
-  // its own screen. The sidebar's create menu draws this same icon rather than naming `Bot` again.
-  agent: Bot,
-  // A board is a row like any other (#285); the views that open one are anchrd/intel#286.
-  board: KanbanSquare,
   flow: Workflow,
 };

package/src/main.tsx

@@ -13,7 +13,6 @@ import { createIntelRouter } from "@/router/router.tsx";
 import { SignInRefused } from "@/sign-in-refused/sign-in-refused.tsx";
 import { applyTheme, readThemeChoice, SystemThemeQuery, themeFor } from "@/theme/theme.ts";
 import { ThemeProvider } from "@/theme/theme-context.tsx";
-import { TimezoneProvider } from "@/timezone/timezone-context.tsx";
 import "./styles.css";
 import "./theme/custom.css";
 
@@ -55,15 +54,13 @@ function paint(): void {
           place for it. */}
       <I18nProvider languages={languages}>
         <ThemeProvider store={window.localStorage}>
-          <TimezoneProvider store={window.localStorage}>
-            {refused ? (
-              <SignInRefused />
-            ) : (
-              <QueryClientProvider client={queryClient}>
-                <RouterProvider router={router} />
-              </QueryClientProvider>
-            )}
-          </TimezoneProvider>
+          {refused ? (
+            <SignInRefused />
+          ) : (
+            <QueryClientProvider client={queryClient}>
+              <RouterProvider router={router} />
+            </QueryClientProvider>
+          )}
         </ThemeProvider>
       </I18nProvider>
     </StrictMode>,

package/src/node-table/node-table.tsx

@@ -9,8 +9,8 @@ import { useIntelRouterContext } from "@/router/router-context.ts";
  * A table as a grid (#40).
  *
  * Reading is the whole of the first cut: there is no cell editor, and rows arrive through
- * `node_table_append` — the point of the kind is that an agent fills it without a person
- * retyping anything.
+ * `node_table_append` — the point of the kind is that a flow or an MCP client fills it without a
+ * person retyping anything. Editing in the grid is anchrd/intel#165.
  *
  * ⚠️ The rows are the server's answer, parsed by the server's one CSV reader. A second reader here
  * would eventually disagree with it about a quoted comma, and the grid would then show something

package/src/nodes/nodes.tsx

@@ -3,7 +3,6 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import { Download, History, Paperclip } from "lucide-react";
 import { lazy, Suspense, useState } from "react";
-import { AgentAvatar } from "@/agent/agent-avatar/agent-avatar.tsx";
 import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
 import { ViewToggle } from "@/app/view-toggle/view-toggle.tsx";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
@@ -18,17 +17,6 @@ import { TitleRow } from "@/title-row/title-row.tsx";
 const NodeEditor = lazy(async () => ({
   default: (await import("@/node-editor/node-editor.tsx")).NodeEditor,
 }));
-// Lazy for the same reason the editor is: assistant-ui and its stream client are the agent page's
-// alone, and every other screen would otherwise pay for them on first paint.
-const AgentPanel = lazy(async () => ({
-  default: (await import("@/agent/agent.tsx")).AgentPanel,
-}));
-// Lazy for the third time, and the reason is the same: dnd-kit, TanStack Table and — behind its own
-// second split — Sigma belong to the board alone, and every other screen would otherwise carry them
-// into its first paint.
-const BoardPanel = lazy(async () => ({
-  default: (await import("@/board/board.tsx")).BoardPanel,
-}));
 
 export function Nodes() {
   const { data } = useIntelRouterContext();
@@ -121,8 +109,6 @@ export function Nodes() {
               title={selected.title}
               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}>
@@ -157,26 +143,6 @@ export function Nodes() {
               <AttachmentPanel node={selected} />
             ) : selected.kind === "table" ? (
               <NodeTablePanel node={selected} />
-            ) : selected.kind === "board" ? (
-              // ⚠️ Before the editor branch for the same reason the agent is: a board's version
-              // body is a JSON document (#285), and BlockNote would open it as prose.
-              <Suspense
-                fallback={
-                  <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-                }
-              >
-                <BoardPanel key={selected.id} node={selected} />
-              </Suspense>
-            ) : selected.kind === "agent" ? (
-              // ⚠️ Before the editor branch, and never reaching it: an agent's version body is a
-              // definition document, not prose, and BlockNote would try to open JSON as a text.
-              <Suspense
-                fallback={
-                  <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-                }
-              >
-                <AgentPanel key={selected.id} node={selected} />
-              </Suspense>
             ) : document.data ? (
               <Suspense
                 fallback={

package/src/resource-menu/resource-menu.tsx

@@ -2,7 +2,6 @@ import type {
   Flow,
   FlowValidation,
   Node,
-  NodeKind,
   ResourceVerb,
   UnreadableNodes,
 } from "@anchrd/intel-contract";
@@ -12,7 +11,9 @@ import {
   Archive,
   CornerLeftUp,
   Ellipsis,
+  FileArchive,
   FolderDown,
+  FolderUp,
   Link2,
   Pencil,
   Share2,
@@ -27,11 +28,15 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { flowEntry } from "@/data/intel-data-provider/intel-data-provider.ts";
 import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
 import { useI18n } from "@/i18n/i18n-context.tsx";
+import { useBundleImport } from "@/import-bundle/import-bundle.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom } from "@/router/selection-search.ts";
@@ -81,18 +86,15 @@ function parentOfTarget(target: ResourceTarget): string | null {
 }
 
 /**
- * Which sentence explains a verb, for THIS kind of thing.
+ * Which sentence explains a verb.
  *
- * ⚠️ "Run" does not mean the same thing twice. On a folder it grants starting the flows filed in
- * it; on an agent it grants using the agent — through its chat, its schedules and its MCP address.
- * Until #143 there was one sentence for both, and on an agent it named flows that have nothing to
- * do with the grant being made. A key per kind, falling back to the general one, so a kind that
- * needs no special wording needs no entry.
+ * ⚠️ One sentence per verb, and that is only true again since Agents were parked (#388). "Run"
+ * used to mean two different things — starting the flows filed in a folder, and using an agent
+ * through its chat, its schedules and its MCP address — so #143 gave the agent its own wording.
+ * With one meaning left, a per-kind branch would be a fork nothing takes.
  */
-export function verbHintKey(verb: ResourceVerb, kind: NodeKind): string {
-  return verb === "execute" && kind === "agent"
-    ? "node.verbHint.execute.agent"
-    : `node.verbHint.${verb}`;
+export function verbHintKey(verb: ResourceVerb): string {
+  return `node.verbHint.${verb}`;
 }
 
 // ⚠️ The same reading `moveErrorKey` does for a move, for the changes this menu makes. A conflict is
@@ -163,6 +165,10 @@ export function ResourceMenu({
   // link anywhere. Both entries are therefore absent on one rather than offered and inert.
   const retrievable = node !== null && node.kind !== "folder";
   const linkable = retrievable;
+  // ⚠️ Absent, not disabled — the rule at the top of this file. An import needs a folder to file
+  // into; a document has nowhere to put a subtree, and a greyed-out entry would promise it does.
+  const importable = node !== null && node.kind === "folder";
+  const bundleImport = useBundleImport({ where: title });
 
   // Everything a change here can make stale. The row sits in one level of the tree, the open screen
   // reads the record, and the flat collections behind the search, the link picker and the relation
@@ -299,6 +305,26 @@ export function ResourceMenu({
             <FolderDown aria-hidden="true" />
             {i18n.t("resource.export")}
           </DropdownMenuItem>
+          {/* The other half of the same round trip, next to it rather than in the tree's plus
+              (#346): one word in the menu, both sources under it. */}
+          {importable ? (
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <FolderUp aria-hidden="true" />
+                {i18n.t("resource.import")}
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem onSelect={() => bundleImport.start(id, "importZip")}>
+                  <FileArchive aria-hidden="true" />
+                  {i18n.t("tree.new.importZip")}
+                </DropdownMenuItem>
+                <DropdownMenuItem onSelect={() => bundleImport.start(id, "importFolder")}>
+                  <FolderUp aria-hidden="true" />
+                  {i18n.t("tree.new.importFolder")}
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          ) : null}
           {/* Only a flow can be run, so only a flow can be asked whether it would. Rarely needed —
               which is why it is in the menu and not in the title line (#72). */}
           {node === null ? (
@@ -344,6 +370,10 @@ export function ResourceMenu({
       {/* Its own sentence, not `resourceErrorKey`'s: nothing was changed, something failed to
           arrive, and "the change was not saved" would send the reader looking for a change. */}
       {exportBundle.isError ? <MenuFailure>{i18n.t("resource.exportFailed")}</MenuFailure> : null}
+      {/* The import's own sentence, and its own pickers — only where the entry exists, because two
+          file inputs on every document's menu would be two elements nothing can ever open. */}
+      {bundleImport.isError ? <MenuFailure>{i18n.t("tree.importFailed")}</MenuFailure> : null}
+      {importable ? bundleImport.inputs : null}
       {/* ⚠️ A move has four refusals of its own and they are told apart by `moveErrorKey`, not by
           `resourceErrorKey`: "that is not a folder" and "that would be a loop" have no equivalent
           among the changes above, and one shared sentence would leave the reader guessing. */}
@@ -696,9 +726,7 @@ function SharePanel({ node, close }: { node: Node; close(): void }) {
                 className="size-4 rounded border outline-none focus-visible:ring-2 focus-visible:ring-ring"
               />
               <span>{i18n.t(`node.verb.${verb}`)}</span>
-              <span className="text-xs text-muted-foreground">
-                {i18n.t(verbHintKey(verb, node.kind))}
-              </span>
+              <span className="text-xs text-muted-foreground">{i18n.t(verbHintKey(verb))}</span>
             </label>
           ))}
         </fieldset>

package/src/section-hint/section-hint.tsx

@@ -5,8 +5,8 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
  * An explanation behind an ⓘ, beside the thing it explains (#204, shared since #249).
  *
  * It exists for the sentence that answers "what IS this" — read once, then furniture. Not for the
- * sentence you need WHILE you type: `agent.cronHint` ("five fields: minute, hour, …") deliberately
- * stays a visible paragraph, because a reference you read while writing must not be behind a hover.
+ * sentence you need WHILE you type: a reference read while writing must not be behind a hover, so
+ * something like a field's format ("five fields: minute, hour, …") stays a visible paragraph.
  * That is the dividing line: *what is this* may hide, *how do I write this* may not.
  *
  * ⚠️ The hint is the trigger's accessible NAME, not only the tooltip's content: Radix describes the

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

@@ -11,47 +11,30 @@ import { ResourceMenu, type ResourceTarget } from "@/resource-menu/resource-menu
  * the rule could be forgotten. That is the whole point: the menu holds rename, move, share and
  * archive, and a position one has to look for is a position one stops using.
  *
- * The three slots are for what belongs to this thing but lives further down the tree, where its
- * state is. `title-meta` is a quiet word beside the name (a table's row count); `title-byline` is a
- * quiet line under it (who made an agent, #258); `title-actions` is a button in the group (saving a
- * document, exporting a table). All are filled through `ActionSlot`, and the two in the group sit
- * before the menu for the same reason `children` do.
+ * The two slots are for what belongs to this thing but lives further down the tree, where its
+ * state is. `title-meta` is a quiet word beside the name (a table's row count); `title-actions` is a
+ * button in the group (saving a document, exporting a table). Both are filled through `ActionSlot`,
+ * and the one in the group sits before the menu for the same reason `children` do.
  */
 export function TitleRow({
   title,
   description,
   target,
-  leading,
-  divider = true,
   children,
 }: {
   title: string;
   description?: string | null;
   target: ResourceTarget;
-  // ⚠️ A picture before the name, for the one kind that has a face: an agent's initials (#143). A
-  // 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 px-6 py-4${divider ? " border-b" : ""}`}
-    >
+    <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
       <div className="flex min-w-0 items-center gap-3">
-        {leading}
         <div className="min-w-0">
           <div className="flex min-w-0 flex-wrap items-baseline gap-x-3">
             <h2 className="truncate text-lg font-semibold">{title}</h2>
             <span data-slot="title-meta" className="text-sm text-muted-foreground" />
           </div>
-          {/* ⚠️ `empty:hidden` is the whole rule for "no line rather than an empty one": nothing is
-              portalled in here for most kinds, and a slot that kept its margin would make every
-              head a few pixels taller for a line nobody wrote (#258). */}
-          <span data-slot="title-byline" className="mt-0.5 block min-w-0 empty:hidden" />
           {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
         </div>
       </div>

package/src/tools/tools.tsx

@@ -86,8 +86,6 @@ export function Tools() {
   const catalog = useQuery({ queryKey: ["tools"], queryFn: () => data.listTools() });
   // The servers behind that same live list (D30). Its own query, and its own failure: a portal that
   // answers tools but no directory still has a usable screen, it just has no boxes to put them in.
-  // The key is the one the agent profile already reads the directory under, so a visit to either
-  // screen serves the other from cache.
   // ⚠️ No retry on this one, and that is a decision about the screen rather than about the request.
   // The tools are held back until the directory has answered, so every further attempt is time
   // somebody spends in front of the word "Loading" — and a retry does not even have to happen: a

package/vite.config.ts

@@ -12,10 +12,6 @@ export default defineConfig({
       "/auth": { target: "http://localhost:8788", changeOrigin: true },
       "/mcp": { target: "http://localhost:8788", changeOrigin: true },
       "/.well-known": { target: "http://localhost:8788", changeOrigin: true },
-      // ⚠️ There is deliberately no `/agents` entry any more (#178). The browser reaches the agent
-      // runtime through intel, which forwards over its `AGENT` service binding — so in development
-      // the runtime still has to be running (`workers/agent`, port 8789, started separately from
-      // `bun run dev`), but Vite proxies nothing to it: wrangler's dev registry connects the two.
     },
   },
 });

package/src/agent/agent-avatar/agent-avatar.tsx

@@ -1,34 +0,0 @@
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-
-/**
- * The first letters of the words in a name, at most two.
- *
- * ⚠️ `Intl.Segmenter` rather than `slice(0, 1)`: an agent may be called "Émile" or "🛰 Radar", and
- * a code unit is not a character. Slicing a surrogate pair in half puts a replacement glyph where
- * the initial should be.
- */
-export function initialsOf(title: string): string {
-  const words = title.trim().split(/\s+/).filter(Boolean).slice(0, 2);
-  const segmenter = new Intl.Segmenter();
-  return words
-    .map((word) => [...segmenter.segment(word)][0]?.segment ?? "")
-    .join("")
-    .toLocaleUpperCase();
-}
-
-/**
- * Who the agent is, as a picture.
- *
- * ⚠️ Decorative on purpose: the name it abbreviates stands right beside it in the title line, so a
- * screen reader that announced both would read the same name twice — once spelled out letter by
- * letter. The picture is the redundant half here, not the text.
- */
-export function AgentAvatar({ title }: { title: string }) {
-  return (
-    <Avatar aria-hidden="true" className="size-9">
-      <AvatarFallback className="bg-primary/10 text-sm font-semibold text-primary">
-        {initialsOf(title)}
-      </AvatarFallback>
-    </Avatar>
-  );
-}