@talgent/workbench-ui 0.0.0 → 0.1.2

package/components/files/file-section.tsx

@@ -0,0 +1,181 @@
+import { useRef, useState, type ReactNode } from "react";
+import { Code, ConnectError } from "@connectrpc/connect";
+import { Alert, Button, Dropdown, Input, Label, Modal, TextField, Tooltip } from "@heroui/react";
+import { Download, FileCode2, FileImage, FileText, Link2, Link2Off, MoreHorizontal, Pencil, Replace, Trash2 } from "lucide-react";
+import { ConfirmDialog } from "../marketplace/marketplace-shared";
+import { RailSection } from "../rail/rail-section";
+import { notify } from "../../lib/notifications";
+import { shareLinkAddress } from "../../lib/share-link";
+import { FileFacts } from "./file-facts";
+
+/** One file of a File Space as its section lists it. */
+export type FileRow = {
+  key: string;
+  name: string;
+  attachment: boolean;
+  sizeBytes: number;
+  contentType: string;
+  modifiedAt: Date | null;
+  /** The Work that published an Artifact, when known. */
+  publishedBy?: string;
+  shared: boolean;
+  /** The reader's own Share Link, when they made one. */
+  ownLink?: string;
+};
+
+type Notice = { status: "success" | "warning"; title: string; description?: string };
+
+/** What the reader may do with the files. Absent actions are not offered;
+ * `rename`, `replace` and `remove` apply while the files may change. */
+export type FileActions = {
+  download: (row: FileRow) => Promise<unknown>;
+  /** Makes a Share Link, returning its address. */
+  share?: (row: FileRow) => Promise<string | undefined>;
+  unshare?: (row: FileRow) => Promise<Notice>;
+  rename?: (row: FileRow, newName: string) => Promise<unknown>;
+  replace?: (row: FileRow, file: File) => Promise<unknown>;
+  remove?: (row: FileRow) => Promise<unknown>;
+  /** What deleting removes, said before the person confirms. */
+  removeNote: string;
+};
+
+type FileAction = "download" | "share" | "unshare" | "rename" | "replace" | "delete";
+
+// FileSection lists one kind of a File Space's files. Each row previews the
+// file; its menu holds the file's actions.
+export function FileSection({ title, rows, actions, onOpen, action }: {
+  title: string; rows: FileRow[]; actions: FileActions; onOpen: (row: FileRow) => void; action?: ReactNode;
+}) {
+  const [hoveredFile, setHoveredFile] = useState<string | null>(null);
+  const [removing, setRemoving] = useState<FileRow | null>(null);
+  const [renaming, setRenaming] = useState<FileRow | null>(null);
+  const replaceInput = useRef<HTMLInputElement>(null);
+  const [replacing, setReplacing] = useState<FileRow | null>(null);
+  // A row is busy while one of its changes is in flight.
+  const [busy, setBusy] = useState<string[]>([]);
+  const failed = (row: FileRow, verb: string) => (error: Error) => notify(`file-${row.key}`, "danger", `Couldn’t ${verb} ${row.name}`, error.message);
+  const done = (row: FileRow, title: string, description?: string) => notify(`file-${row.key}`, "success", title, description);
+  const track = <T,>(row: FileRow, work: () => Promise<T>) => {
+    setBusy(keys => [...keys, row.key]);
+    return work().finally(() => setBusy(keys => keys.filter(key => key !== row.key)));
+  };
+  const copy = (row: FileRow, url: string) => void navigator.clipboard.writeText(shareLinkAddress(url)).then(
+    () => notify(`file-${row.key}`, "success", "Share link copied", `Anyone with the link can view ${row.name}.`),
+    () => notify(`file-${row.key}`, "danger", "Couldn’t copy the share link", shareLinkAddress(url)));
+
+  const run = (row: FileRow, key: FileAction) => {
+    switch (key) {
+      case "download":
+        actions.download(row).catch(failed(row, "download"));
+        break;
+      case "share":
+        // Copy the link the person made; otherwise make one of their own.
+        if (row.ownLink) copy(row, row.ownLink);
+        else actions.share?.(row).then(url => { if (url) copy(row, url); }, failed(row, "share"));
+        break;
+      case "unshare":
+        if (actions.unshare) void track(row, () => actions.unshare!(row)).then(notice => notify(`file-${row.key}`, notice.status, notice.title, notice.description), failed(row, "stop sharing"));
+        break;
+      case "rename":
+        setRenaming(row);
+        break;
+      case "replace":
+        setReplacing(row);
+        replaceInput.current?.click();
+        break;
+      case "delete":
+        setRemoving(row);
+        break;
+    }
+  };
+
+  return <RailSection title={title} action={action}>
+    <ul className="cr-list">{rows.map(row => {
+      const offered: Array<{ id: FileAction; label: string; icon: typeof Download }> = [
+        { id: "download", label: "Download", icon: Download },
+        ...(actions.share ? [{ id: "share" as const, label: row.ownLink ? "Copy share link" : "Create share link", icon: Link2 }] : []),
+        ...(actions.unshare && row.shared ? [{ id: "unshare" as const, label: "Stop sharing", icon: Link2Off }] : []),
+        ...(row.attachment && actions.rename ? [{ id: "rename" as const, label: "Rename", icon: Pencil }] : []),
+        ...(row.attachment && actions.replace ? [{ id: "replace" as const, label: "Replace", icon: Replace }] : []),
+        ...(actions.remove ? [{ id: "delete" as const, label: "Delete", icon: Trash2 }] : []),
+      ];
+      return <li key={row.key} className="cr-file-row">
+        <Tooltip isOpen={hoveredFile === row.key} onOpenChange={open => setHoveredFile(open ? row.key : null)}><Button onHoverStart={() => setHoveredFile(row.key)} onHoverEnd={() => setHoveredFile(null)} onFocus={() => setHoveredFile(row.key)} onBlur={() => setHoveredFile(null)} variant="ghost" className="cr-file" aria-label={`Preview ${row.name}`} onPress={() => onOpen(row)}>
+          <FileIcon row={row} /><span>{row.name}</span>
+        </Button><Tooltip.Content placement="left" className="cr-file-tooltip">
+          <FileFacts name={row.name} sizeBytes={row.sizeBytes} modifiedAt={row.modifiedAt}>
+            {row.publishedBy && <span title={row.publishedBy}>Published by Work {row.publishedBy.slice(0, 8)}</span>}
+            {row.shared && <span>Shared by link</span>}
+          </FileFacts>
+        </Tooltip.Content></Tooltip>
+        <Dropdown>
+          <Tooltip><Button isIconOnly size="sm" variant="ghost" className="cr-file-more" aria-label={`Actions for ${row.name}`} isPending={busy.includes(row.key)}><MoreHorizontal size={14} /></Button><Tooltip.Content>More</Tooltip.Content></Tooltip>
+          <Dropdown.Popover placement="bottom end"><Dropdown.Menu aria-label={`Actions for ${row.name}`} onAction={id => run(row, String(id) as FileAction)}>
+            {offered.map(({ id, label, icon: Icon }) => <Dropdown.Item key={id} id={id} textValue={label} variant={id === "delete" ? "danger" : undefined}><Icon size={15} aria-hidden="true" /><Label>{label}</Label></Dropdown.Item>)}
+          </Dropdown.Menu></Dropdown.Popover>
+        </Dropdown>
+      </li>;
+    })}</ul>
+    <input ref={replaceInput} type="file" hidden aria-label="Choose replacement file" onChange={event => {
+      const chosen = event.target.files?.[0];
+      event.target.value = "";
+      const target = replacing;
+      setReplacing(null);
+      if (!chosen || !target || !actions.replace) return;
+      // The new content keeps the Attachment's name and share links.
+      const named = new File([chosen], target.name, { type: chosen.type });
+      track(target, () => actions.replace!(target, named)).then(() => done(target, `Replaced ${target.name}`), failed(target, "replace"));
+    }} />
+    <ConfirmDialog isOpen={removing !== null} onOpenChange={open => { if (!open) setRemoving(null); }} title={`Delete ${removing?.name ?? "file"}?`} confirmLabel="Delete" onConfirm={() => {
+      const target = removing;
+      if (target && actions.remove) track(target, () => actions.remove!(target)).then(() => done(target, `Deleted ${target.name}`), failed(target, "delete"));
+      setRemoving(null);
+    }}>
+      <p>{actions.removeNote}</p>
+    </ConfirmDialog>
+    {renaming && actions.rename && <RenameDialog key={renaming.key} row={renaming} rename={newName => actions.rename!(renaming, newName)} onClose={() => setRenaming(null)} />}
+  </RailSection>;
+}
+
+// AttachmentConflictDialog asks before an upload replaces the Attachment of
+// the same name; nothing is replaced unless the person confirms.
+export function AttachmentConflictDialog({ conflict, onClose, onReplace }: { conflict: File | null; onClose: () => void; onReplace: (file: File) => void }) {
+  return <ConfirmDialog isOpen={conflict !== null} onOpenChange={open => { if (!open) onClose(); }} title={`Replace ${conflict?.name ?? "attachment"}?`} confirmLabel="Replace" onConfirm={() => { if (conflict) onReplace(conflict); onClose(); }}>
+    <p>An attachment with this name already exists. Replacing it keeps its share links; rename your file instead to keep both.</p>
+  </ConfirmDialog>;
+}
+
+function RenameDialog({ row, rename, onClose }: { row: FileRow; rename: (newName: string) => Promise<unknown>; onClose: () => void }) {
+  const [name, setName] = useState(row.name);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const trimmed = name.trim();
+  const submit = () => {
+    if (!trimmed || trimmed === row.name || pending) return;
+    setPending(true); setError(null);
+    rename(trimmed).then(onClose, (cause: unknown) => setError(cause instanceof Error ? cause : new Error(String(cause)))).finally(() => setPending(false));
+  };
+  return <Modal><Modal.Backdrop isOpen onOpenChange={open => { if (!open && !pending) onClose(); }} isDismissable={!pending}><Modal.Container placement="center" size="sm"><Modal.Dialog>
+    <Modal.Header><Modal.Heading>Rename {row.name}</Modal.Heading></Modal.Header>
+    <Modal.Body>
+      <TextField value={name} onChange={setName} isInvalid={Boolean(error)} autoFocus>
+        <Label>Name</Label>
+        <Input onKeyDown={event => { if (event.key === "Enter") submit(); }} />
+      </TextField>
+      {error && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>{renameErrorMessage(error)}</Alert.Description></Alert.Content></Alert>}
+    </Modal.Body>
+    <Modal.Footer><Button variant="secondary" isDisabled={pending} onPress={onClose}>Cancel</Button><Button isPending={pending} isDisabled={!trimmed || trimmed === row.name} onPress={submit}>Rename</Button></Modal.Footer>
+  </Modal.Dialog></Modal.Container></Modal.Backdrop></Modal>;
+}
+
+function FileIcon({ row }: { row: FileRow }) {
+  const kind = row.contentType === "application/pdf" ? "pdf" : row.contentType.startsWith("image/") ? "image" : row.name.endsWith(".json") ? "code" : "document";
+  const Icon = kind === "image" ? FileImage : kind === "code" ? FileCode2 : FileText;
+  return <Icon size={15} className="cr-file-icon" data-kind={kind} aria-hidden="true" />;
+}
+
+function renameErrorMessage(error: Error) {
+  if (error instanceof ConnectError && error.code === Code.AlreadyExists) return "Another attachment already has this name.";
+  if (error instanceof ConnectError && error.code === Code.InvalidArgument) return "Use one file name without slashes.";
+  return error.message;
+}

package/components/markdown.tsx

@@ -0,0 +1,144 @@
+import { code } from "@streamdown/code";
+import type { CSSProperties } from "react";
+import type { DiagramPlugin as OfficialMermaidPlugin } from "@streamdown/mermaid";
+import { Block, defaultRehypePlugins, defaultRemarkPlugins, defaultUrlTransform, Streamdown, type Components, type DiagramPlugin } from "streamdown";
+
+// Streamdown's official Mermaid plugin imports mermaid eagerly; this wrapper
+// keeps that (large) module out of the first load until a diagram renders.
+// Each instance carries the configuration Streamdown gives it.
+type MermaidConfig = Parameters<OfficialMermaidPlugin["getMermaid"]>[0];
+const mermaid: DiagramPlugin = {
+  name: "mermaid", type: "diagram", language: "mermaid",
+  getMermaid(initial) {
+    let config = initial as MermaidConfig;
+    return {
+      initialize(next) { config = next as MermaidConfig; },
+      async render(id, source) {
+        const { mermaid: plugin } = await import("@streamdown/mermaid");
+        return plugin.getMermaid(config).render(id, source);
+      },
+    };
+  },
+};
+
+const plugins = { code, mermaid };
+const controls = { code: { copy: true, download: false }, table: false, mermaid: { copy: true, download: false, fullscreen: true, panZoom: false } };
+const components: Components = {
+  strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
+  // HAST supplies defaultChecked; controlled state also follows edits to a task.
+  input: ({ checked, defaultChecked, disabled, type }) => (
+    <input type={type} checked={checked ?? defaultChecked ?? false} disabled={disabled} readOnly />
+  ),
+};
+
+// Inline Markdown reads within a line of surrounding content, such as a cited
+// statement: paragraphs do not break the line, and without links it can sit
+// inside a control. It renders one block without Streamdown's block root, so
+// it is phrasing content that inherits the surrounding type.
+// Streamdown's own code and link components bring block behaviour (copy
+// controls, link-safety modal), so inline mirrors only their markup and hooks;
+// the shared app-markdown styles then apply alike.
+const inlineComponents: Components = {
+  ...components,
+  p: ({ children }) => <>{children}{" "}</>,
+  code: ({ children }) => <code className="rounded px-1.5 py-0.5 font-mono" data-streamdown="inline-code">{children}</code>,
+  a: ({ children, href }) => <a className="font-medium underline" data-streamdown="link" href={href} target="_blank" rel="noopener noreferrer">{children}</a>,
+};
+const inlineTextComponents: Components = { ...inlineComponents, a: ({ children }) => <>{children}</> };
+// A preview reads as one run of text, such as a clamped summary: blocks become
+// phrasing, so headings and lists keep their words without their structure.
+const previewComponents: Components = {
+  ...inlineTextComponents,
+  h1: ({ children }) => <>{children}{" "}</>, h2: ({ children }) => <>{children}{" "}</>, h3: ({ children }) => <>{children}{" "}</>,
+  h4: ({ children }) => <>{children}{" "}</>, h5: ({ children }) => <>{children}{" "}</>, h6: ({ children }) => <>{children}{" "}</>,
+  ul: ({ children }) => <>{children}</>, ol: ({ children }) => <>{children}</>, li: ({ children }) => <>{children}{" "}</>,
+  blockquote: ({ children }) => <>{children}</>, pre: ({ children }) => <>{children}{" "}</>, hr: () => null,
+  table: () => null, img: () => null,
+};
+
+// The same sanitization and URL policy Streamdown applies to its blocks.
+const remarkPlugins = Object.values(defaultRemarkPlugins);
+const rehypePlugins = Object.values(defaultRehypePlugins);
+
+// Block is Streamdown's per-block renderer and its props are streaming
+// internals: recheck them, and the markdown tests, when upgrading Streamdown.
+export function InlineMarkdown({ children, className = "", links = true }: { children: string; className?: string; links?: boolean }) {
+  return (
+    <span className={`app-markdown-inline ${className}`} dir="auto">
+      <Block
+        content={children}
+        index={0}
+        isIncomplete={false}
+        shouldParseIncompleteMarkdown={false}
+        shouldNormalizeHtmlIndentation={false}
+        remarkPlugins={remarkPlugins}
+        rehypePlugins={rehypePlugins}
+        urlTransform={defaultUrlTransform}
+        components={links ? inlineComponents : inlineTextComponents}
+      />
+    </span>
+  );
+}
+
+/** Markdown flattened to one run of phrasing content, for clamped previews. */
+export function PreviewMarkdown({ children, className = "" }: { children: string; className?: string }) {
+  return (
+    <Streamdown className={`app-markdown ${className}`} mode="static" components={previewComponents} controls={false} lineNumbers={false} linkSafety={{ enabled: false }} dir="auto">
+      {children}
+    </Streamdown>
+  );
+}
+
+/** One renderer for stored documents and incrementally arriving Agent text. */
+export function Markdown({ children, className = "", streaming = false, showControls = true }: {
+  children: string;
+  className?: string;
+  streaming?: boolean;
+  showControls?: boolean;
+}) {
+  return (
+    <Streamdown
+      className={`app-markdown ${className}`}
+      mode={streaming ? "streaming" : "static"}
+      parseIncompleteMarkdown={streaming}
+      plugins={plugins}
+      components={components}
+      controls={showControls ? controls : false}
+      lineNumbers={false}
+      linkSafety={{ enabled: false }}
+      // A table grows to its full height in the reading flow; Streamdown's
+      // default 300px cap would nest a second scroller inside it.
+      tableMaxHeight={0}
+      dir="auto"
+    >
+      {children}
+    </Streamdown>
+  );
+}
+
+/** The longest backtick run decides the fence, so source never closes it early. */
+function fenced(source: string, info: string): string {
+  let longest = 0;
+  for (const match of source.matchAll(/`+/g)) longest = Math.max(longest, match[0].length);
+  const fence = "`".repeat(Math.max(3, longest + 1));
+  return `${fence}${info}\n${source}${source.endsWith("\n") ? "" : "\n"}${fence}`;
+}
+
+/**
+ * A source listing in the same highlighting as Markdown code blocks, numbered
+ * from `startLine` by logical line. `language` is a Shiki language or "text".
+ * The listing is the whole reading, so it grows to its full height; 0 lifts
+ * Streamdown's default 400px cap and its inner scroll.
+ */
+export function CodeListing({ code: source, language, startLine = 1 }: { code: string; language: string; startLine?: number }) {
+  const lastLine = startLine + source.split("\n").length - 1;
+  return (
+    <div className="app-code-listing" style={{ "--line-gutter": `${String(lastLine).length}ch` } as CSSProperties}>
+      <Streamdown className="app-markdown" mode="static" plugins={{ code }} components={components}
+        controls={{ code: { copy: true, download: false } }} lineNumbers linkSafety={{ enabled: false }}
+        codeBlockMaxHeight={0}>
+        {fenced(source, `${language} startLine=${startLine}`)}
+      </Streamdown>
+    </div>
+  );
+}

package/components/marketplace/connector-pages.tsx

@@ -0,0 +1,166 @@
+import { useState } from "react";
+import { Alert, Button, Card, Dropdown, Label, Switch, Tooltip } from "@heroui/react";
+import type { Connector } from "@talgent/workbench-contracts/marketplace/public/v1/marketplace_pb";
+import { ChevronRight, KeyRound, Lock, MoreHorizontal, Plus } from "lucide-react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { installStatusLabel, pluginStatus, connectorStatus, useConnector, useConnectorActions, useConnectors, useInstalledPlugins, usePluginCatalog } from "../../lib/marketplace-catalog";
+import { providerName, serviceLabel, useConnectProvider } from "../../lib/marketplace-connections";
+import { isPlatformPlugin, pluginDisplayName, pluginPresentation } from "../../lib/marketplace-plugins";
+import { marketplacePaths } from "../../lib/marketplace-routes";
+import { notify } from "../../lib/notifications";
+import { ConnectorIcon, PluginIcon, ProviderIcon } from "./marketplace-icons";
+import { ConfirmDialog, LoadState, NothingMatches, SearchBar } from "./marketplace-shared";
+
+// A Connector's sign-in always goes through its declared Provider; there is
+// no manual credential entry.
+function providerNotice(connector: Connector) {
+  if (!connector.provider) return { text: "No sign-in needed", warning: false };
+  const name = providerName(connector.provider);
+  if (connector.providerConnection === "connected") return { text: `Signs in with your ${name} account`, warning: false };
+  return { text: connector.providerConnection === "reconnect_required" ? `${name} authorization needs renewal` : `${name} isn’t connected yet`, warning: true };
+}
+
+function useConnectorCommands() {
+  const actions = useConnectorActions();
+  const connect = useConnectProvider();
+  const { pathname } = useLocation();
+  const install = (connector: Connector) => {
+    const label = serviceLabel(connector.name);
+    actions.install.mutate(connector.name, {
+      // Installation never waits for authorization; connecting is offered after.
+      onSuccess: result => {
+        const offer = result.provider && result.providerConnection !== "connected";
+        notify(`connector:${connector.name}`, "success", `${label} installed`, offer ? `Connect ${providerName(result.provider)} so Works can use it.` : "Works you start from now on can use it.", {
+          action: offer ? { label: `Connect ${providerName(result.provider)}`, onPress: () => connect.mutate({ provider: result.provider, returnTo: pathname }) } : { label: "Undo", onPress: () => actions.uninstall.mutate(result) },
+        });
+      },
+      onError: () => notify(`connector:${connector.name}`, "danger", `${label} couldn’t be installed`, "Try again."),
+    });
+  };
+  const toggle = (connector: Connector) => {
+    const enabled = connector.status !== "enabled";
+    actions.setEnabled.mutate({ connector, enabled }, {
+      onSuccess: () => notify(`connector:${connector.name}`, "default", `${serviceLabel(connector.name)} ${enabled ? "enabled" : "disabled"}`),
+      onError: () => notify(`connector:${connector.name}`, "danger", `${serviceLabel(connector.name)} couldn’t be changed`, "Refresh and try again."),
+    });
+  };
+  const uninstall = (connector: Connector) => actions.uninstall.mutate(connector, {
+    onSuccess: () => notify(`connector:${connector.name}`, "default", `${serviceLabel(connector.name)} uninstalled`),
+    onError: () => notify(`connector:${connector.name}`, "danger", `${serviceLabel(connector.name)} couldn’t be uninstalled`, "Refresh and try again."),
+  });
+  return { install, toggle, uninstall, connect, pending: actions.install.isPending };
+}
+
+function UninstallConnectorDialog({ connector, onClose, onConfirm }: { connector: Connector | null; onClose: () => void; onConfirm: (connector: Connector) => void }) {
+  return <ConfirmDialog isOpen={connector !== null} onOpenChange={open => { if (!open) onClose(); }} title={`Uninstall ${connector ? serviceLabel(connector.name) : ""}?`} confirmLabel="Uninstall" onConfirm={() => { if (connector) onConfirm(connector); }}>
+    <p>Works you start afterwards can’t use it. Works already running keep it.{connector?.provider ? ` Your ${providerName(connector.provider)} Provider stays connected.` : ""} Plugins aren’t affected.</p>
+  </ConfirmDialog>;
+}
+
+export function ConnectorList({ category }: { category?: string }) {
+  const connectors = useConnectors();
+  const commands = useConnectorCommands();
+  const navigate = useNavigate();
+  const [query, setQuery] = useState("");
+  const [removing, setRemoving] = useState<Connector | null>(null);
+  const rows = (connectors.data ?? []).filter(item => (!category || categoryOf(item) === category) && `${serviceLabel(item.name)} ${item.description}`.toLowerCase().includes(query.trim().toLowerCase()));
+  const groups = [...new Set(rows.map(categoryOf))].sort((a, b) => a === "Other" ? 1 : b === "Other" ? -1 : a.localeCompare(b)).map(name => ({ name, items: rows.filter(item => categoryOf(item) === name) }));
+  const row = (connector: Connector) => {
+    const status = connectorStatus(connector), notice = providerNotice(connector), installed = status === "enabled" || status === "disabled";
+    const label = serviceLabel(connector.name);
+    return <li key={connector.name} className="mk-row" data-off={status === "disabled" || undefined}>
+      <Link className="mk-row-open" to={marketplacePaths.connector(connector.name)}>
+        <ConnectorIcon name={connector.name} />
+        <span className="mk-row-text"><strong>{label}</strong><span className={installed && notice.warning ? "text-warning" : ""}>{status === "disabled" ? "Disabled" : installed && notice.warning ? notice.text : connector.description}</span></span>
+      </Link>
+      {connector.required ? <Tooltip><Tooltip.Trigger aria-label="Always enabled" className="mk-row-lock"><Lock size={16} /></Tooltip.Trigger><Tooltip.Content>Always enabled</Tooltip.Content></Tooltip>
+        : installed ? <Dropdown><Button size="sm" variant="ghost" isIconOnly aria-label={`${label} options`}><MoreHorizontal size={18} /></Button>
+          <Dropdown.Popover placement="bottom end"><Dropdown.Menu aria-label={`${label} options`} onAction={key => {
+            if (key === "open") navigate(marketplacePaths.connector(connector.name));
+            if (key === "toggle") commands.toggle(connector);
+            if (key === "uninstall") setRemoving(connector);
+          }}>
+            <Dropdown.Item id="open" textValue="Open"><Label>Open</Label></Dropdown.Item>
+            <Dropdown.Item id="toggle" textValue={status === "enabled" ? "Disable" : "Enable"}><Label>{status === "enabled" ? "Disable" : "Enable"}</Label></Dropdown.Item>
+            <Dropdown.Item id="uninstall" textValue="Uninstall" variant="danger"><Label>Uninstall…</Label></Dropdown.Item>
+          </Dropdown.Menu></Dropdown.Popover></Dropdown>
+          : <Button size="sm" variant="ghost" isIconOnly isPending={commands.pending} aria-label={`Install ${label}`} onPress={() => commands.install(connector)}><Plus size={20} strokeWidth={1.75} /></Button>}
+    </li>;
+  };
+  return <>
+    <SearchBar label={category ? `Search ${category.toLowerCase()} connectors` : "Search connectors"} value={query} onChange={setQuery} />
+    <LoadState noun="connectors" isPending={connectors.isPending} isError={connectors.isError} hasData={Boolean(connectors.data)} isFetching={connectors.isFetching} onRetry={() => void connectors.refetch()} />
+    {connectors.data && (groups.length === 0 ? (query ? <NothingMatches onClear={() => setQuery("")} /> : <div className="mk-empty"><p><strong>No connectors yet</strong></p></div>)
+      : groups.map(group => <section key={group.name} className="mk-section" aria-label={group.name}>
+        {!category && <Link className="mk-section-head" to={marketplacePaths.connectorCategory(group.name)}>{group.name}<ChevronRight size={18} aria-hidden="true" /></Link>}
+        <ul className="mk-rows">{(category ? group.items : group.items.slice(0, 6)).map(row)}</ul>
+      </section>))}
+    <UninstallConnectorDialog connector={removing} onClose={() => setRemoving(null)} onConfirm={commands.uninstall} />
+  </>;
+}
+
+const categoryOf = (connector: Connector) => connector.category ? pluginDisplayName(connector.category) : "Other";
+
+export function ConnectorPage({ name }: { name: string }) {
+  const detail = useConnector(name);
+  const commands = useConnectorCommands();
+  const catalog = usePluginCatalog();
+  const installedPlugins = useInstalledPlugins();
+  const { pathname } = useLocation();
+  const [confirm, setConfirm] = useState(false);
+  const connector = detail.data?.connector;
+  if (!connector) return <LoadState noun="connector" isPending={detail.isPending} isError={detail.isError} hasData={false} isFetching={detail.isFetching} onRetry={() => void detail.refetch()} />;
+  const label = serviceLabel(connector.name), status = connectorStatus(connector), notice = providerNotice(connector);
+  const installed = status === "enabled" || status === "disabled";
+  const releases = new Map((catalog.data ?? []).map(plugin => [plugin.slug, plugin]));
+  const connect = () => commands.connect.mutate({ provider: connector.provider, returnTo: pathname });
+  const connectLabel = connector.providerConnection === "reconnect_required" ? "Reconnect" : "Connect";
+  return <div className="mk-detail">
+    <header className="mk-detail-head">
+      <ConnectorIcon name={connector.name} size={64} />
+      <div className="mk-detail-title"><h2>{label}</h2><p className="mk-meta">{connector.category && <span>{categoryOf(connector)}</span>}<span>MCP connector</span></p></div>
+      <div className="mk-detail-actions">
+        {connector.required ? <span className="mk-muted mk-inline"><Lock size={15} aria-hidden="true" />Always enabled</span>
+          : !installed ? <Button variant="primary" isPending={commands.pending} onPress={() => commands.install(connector)}>Install</Button>
+          : <>
+            <Switch isSelected={status === "enabled"} onChange={() => commands.toggle(connector)} aria-label={`Enable ${label}`}><Switch.Control><Switch.Thumb /></Switch.Control></Switch>
+            <Dropdown><Button size="sm" variant="ghost" isIconOnly aria-label={`More actions for ${label}`}><MoreHorizontal size={18} /></Button>
+              <Dropdown.Popover placement="bottom end"><Dropdown.Menu aria-label="More actions" onAction={key => { if (key === "uninstall") setConfirm(true); }}>
+                <Dropdown.Item id="uninstall" textValue="Uninstall" variant="danger"><Label>Uninstall…</Label></Dropdown.Item>
+              </Dropdown.Menu></Dropdown.Popover></Dropdown>
+          </>}
+      </div>
+    </header>
+    <UninstallConnectorDialog connector={confirm ? connector : null} onClose={() => setConfirm(false)} onConfirm={commands.uninstall} />
+    {installed && notice.warning && <Alert status="warning"><Alert.Indicator /><Alert.Content><Alert.Title>{notice.text}</Alert.Title>
+      <Alert.Description>Works start without {label} access until you {connectLabel.toLowerCase()} your {providerName(connector.provider)} account.</Alert.Description>
+      <Button size="sm" variant="secondary" className="mt-2" isPending={commands.connect.isPending} onPress={connect}><KeyRound size={14} />{connectLabel} {providerName(connector.provider)}</Button>
+    </Alert.Content></Alert>}
+
+    <section className="mk-section"><h3 className="mk-section-title">About</h3>
+      <Card className="mk-group mk-about mk-about-single"><p className="mk-about-text">{connector.description}</p></Card>
+    </section>
+
+    {connector.provider && <section className="mk-section"><h3 className="mk-section-title">Provider</h3>
+      <Card className="mk-group"><ul className="mk-group-list"><li className="mk-group-link mk-group-split">
+        <Link to={marketplacePaths.provider(connector.provider)}>
+          <ProviderIcon id={connector.provider} size={32} /><span className="mk-row-text"><strong>{providerName(connector.provider)}</strong><span className={notice.warning ? "text-warning" : ""}>{connector.providerConnection === "connected" ? "Connected" : connector.providerConnection === "reconnect_required" ? "Authorization expired" : "Not connected — required to use this connector"}</span></span>
+          {!notice.warning && <ChevronRight size={16} className="mk-muted ml-auto" aria-hidden="true" />}
+        </Link>
+        {notice.warning && <Button size="sm" variant="secondary" isPending={commands.connect.isPending} onPress={connect}>{connectLabel}</Button>}
+      </li></ul></Card>
+    </section>}
+
+    {(detail.data?.plugins.length ?? 0) > 0 && <section className="mk-section">
+      <h3 className="mk-section-title">Plugins that use it <span className="mk-count">{detail.data!.plugins.length}</span></h3>
+      <Card className="mk-group"><ul className="mk-group-list">{detail.data!.plugins.map(item => {
+        const release = releases.get(item.slug);
+        return <li key={item.slug} className="mk-group-link"><Link to={marketplacePaths.plugin(item.slug)}>
+          {release ? <PluginIcon plugin={release} size={32} /> : <ConnectorIcon name={item.slug} size={32} />}
+          <span className="mk-row-text"><strong>{release ? pluginPresentation(release).name : pluginDisplayName(item.slug)}<span className="mk-kind">Plugin</span></strong><span>{installStatusLabel[pluginStatus(isPlatformPlugin(item.slug), installedPlugins.data?.get(item.slug))]}</span></span>
+          <ChevronRight size={16} className="mk-muted ml-auto" aria-hidden="true" />
+        </Link></li>;
+      })}</ul></Card>
+    </section>}
+  </div>;
+}

package/components/marketplace/marketplace-icons.tsx

@@ -0,0 +1,66 @@
+import { BookOpen, Code2, Database, FlaskConical, Palette, Plug, Puzzle, Rocket, ShieldCheck, Sparkles, Workflow, type LucideIcon } from "lucide-react";
+import figma from "../../assets/brand-icons/figma.svg";
+import github from "../../assets/brand-icons/github.svg";
+import linear from "../../assets/brand-icons/linear.svg";
+import notion from "../../assets/brand-icons/notion.svg";
+import sentry from "../../assets/brand-icons/sentry.svg";
+import slack from "../../assets/brand-icons/slack.svg";
+import { pluginPresentation, type PresentablePlugin } from "../../lib/marketplace-plugins";
+
+// Known services use their brand mark; Talgent's own Plugins and Connectors use
+// the product mark; every other Plugin gets a glyph tinted by its category.
+const brands: Record<string, { url: string; color: string }> = {
+  github: { url: github, color: "#181717" }, linear: { url: linear, color: "#5E6AD2" }, notion: { url: notion, color: "#000000" },
+  slack: { url: slack, color: "#4A154B" }, figma: { url: figma, color: "#F24E1E" }, sentry: { url: sentry, color: "#362D59" },
+  talgent: { url: "/assets/brand/talgent-mark.png", color: "var(--brand-foreground)" },
+};
+
+// A name belongs to a brand when it is the brand or a hyphenated extension of it.
+function brandOf(name: string) {
+  const lower = name.toLowerCase();
+  return Object.keys(brands).find(brand => lower === brand || lower.startsWith(`${brand}-`) || lower.endsWith(`-${brand}`));
+}
+
+const categories: Record<string, { hue: string; glyph: LucideIcon }> = {
+  Development: { hue: "oklch(55% 0.09 250)", glyph: Code2 },
+  Productivity: { hue: "oklch(52% 0.09 285)", glyph: Workflow },
+  Security: { hue: "oklch(55% 0.1 20)", glyph: ShieldCheck },
+  Testing: { hue: "oklch(55% 0.09 150)", glyph: FlaskConical },
+  Database: { hue: "oklch(55% 0.08 190)", glyph: Database },
+  Deployment: { hue: "oklch(58% 0.1 45)", glyph: Rocket },
+  Design: { hue: "oklch(55% 0.11 330)", glyph: Palette },
+  Learning: { hue: "oklch(58% 0.09 75)", glyph: BookOpen },
+  Other: { hue: "oklch(55% 0 0)", glyph: Puzzle },
+};
+
+function Tile({ size, hue, brand, children }: { size: number; hue?: string; brand?: boolean; children: React.ReactNode }) {
+  return <span className={`mk-icon${brand ? " mk-icon-brand" : ""}`} style={{ width: size, height: size, borderRadius: Math.round(size * 0.28), ["--mk-hue" as string]: hue ?? categories.Other.hue }} aria-hidden="true">{children}</span>;
+}
+
+function BrandMark({ id, size }: { id: string; size: number }) {
+  const brand = brands[id];
+  return <span className="mk-brand-mark" style={{ width: size, height: size, backgroundColor: brand.color, maskImage: `url("${brand.url}")`, WebkitMaskImage: `url("${brand.url}")` }} />;
+}
+
+export function PluginIcon({ plugin, size = 40 }: { plugin: PresentablePlugin; size?: number }) {
+  const brand = plugin.source === "talgent" ? "talgent" : brandOf(plugin.slug);
+  if (brand) return <Tile size={size} brand><BrandMark id={brand} size={Math.round(size * 0.5)} /></Tile>;
+  const category = categories[pluginPresentation(plugin).category] ?? { hue: categories.Other.hue, glyph: Sparkles };
+  const Glyph = category.glyph;
+  return <Tile size={size} hue={category.hue}><Glyph size={Math.round(size * 0.48)} strokeWidth={1.7} /></Tile>;
+}
+
+export function ConnectorIcon({ name, size = 40 }: { name: string; size?: number }) {
+  const brand = brandOf(name);
+  return <span className="mk-icon-stack" style={{ width: size, height: size }} aria-hidden="true">
+    {brand ? <Tile size={size} brand><BrandMark id={brand} size={Math.round(size * 0.5)} /></Tile>
+      : <Tile size={size} hue="oklch(57% 0.09 70)"><span className="mk-icon-letter" style={{ fontSize: Math.round(size * 0.4) }}>{name.charAt(0).toUpperCase()}</span></Tile>}
+    {size >= 28 && <span className="mk-icon-badge"><Plug size={Math.max(10, Math.round(size * 0.26))} /></span>}
+  </span>;
+}
+
+export function ProviderIcon({ id, size = 40 }: { id: string; size?: number }) {
+  const brand = brandOf(id);
+  return brand ? <Tile size={size} brand><BrandMark id={brand} size={Math.round(size * 0.5)} /></Tile> : <Tile size={size}><span className="mk-icon-letter">{id.charAt(0).toUpperCase()}</span></Tile>;
+}
+

package/components/marketplace/marketplace-shared.tsx

@@ -0,0 +1,43 @@
+import { Alert, AlertDialog, Button, SearchField, Skeleton } from "@heroui/react";
+import { Bot, Plug, Sparkles } from "lucide-react";
+import type { ReactNode } from "react";
+
+// One hue per native component type, used on every Marketplace page.
+const capabilityIcons = { skill: Sparkles, agent: Bot, mcp: Plug } as const;
+export function CapIcon({ kind, size = 16 }: { kind: keyof typeof capabilityIcons; size?: number }) {
+  const Icon = capabilityIcons[kind];
+  return <Icon size={size} className={`mk-cap mk-cap-${kind}`} aria-hidden="true" />;
+}
+
+export function SearchBar({ label, value, onChange }: { label: string; value: string; onChange: (value: string) => void }) {
+  return <div className="mk-toolbar"><SearchField aria-label={label} value={value} onChange={onChange} className="mk-search">
+    <SearchField.Group><SearchField.SearchIcon /><SearchField.Input placeholder={label} /><SearchField.ClearButton aria-label="Clear search" /></SearchField.Group>
+  </SearchField></div>;
+}
+
+export function NothingMatches({ onClear }: { onClear: () => void }) {
+  return <div className="mk-empty"><p><strong>Nothing matches</strong></p><Button size="sm" variant="secondary" onPress={onClear}>Clear search</Button></div>;
+}
+
+// Loading text stays screen-reader-only; a failed refresh keeps the last good
+// list with a warning, and a list that never loaded offers retry in its place.
+export function LoadState({ noun, isPending, isError, hasData, isFetching, onRetry }: { noun: string; isPending: boolean; isError: boolean; hasData: boolean; isFetching: boolean; onRetry: () => void }) {
+  if (isPending) return <div className="mk-skeletons" aria-busy="true"><p className="sr-only" role="status">Loading {noun}…</p>{[0, 1, 2].map(index => <Skeleton key={index} className="mk-skeleton" />)}</div>;
+  if (!isError) return null;
+  return <Alert status={hasData ? "warning" : "danger"}><Alert.Indicator /><Alert.Content>
+    <Alert.Title>{hasData ? `${capitalize(noun)} couldn’t be refreshed` : `${capitalize(noun)} couldn’t be loaded`}</Alert.Title>
+    {hasData && <Alert.Description>Showing what was loaded before.</Alert.Description>}
+    <Button size="sm" variant="secondary" className="mt-2" isPending={isFetching} onPress={onRetry}>Try again</Button>
+  </Alert.Content></Alert>;
+}
+const capitalize = (text: string) => text.charAt(0).toUpperCase() + text.slice(1);
+
+// Destructive confirmation; Cancel receives focus first.
+export function ConfirmDialog({ isOpen, onOpenChange, title, children, confirmLabel, onConfirm }: { isOpen: boolean; onOpenChange: (open: boolean) => void; title: string; children: ReactNode; confirmLabel: string; onConfirm: () => void }) {
+  return <AlertDialog><AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}><AlertDialog.Container><AlertDialog.Dialog className="sm:max-w-[420px]">
+    <AlertDialog.Header><AlertDialog.Icon status="danger" /><AlertDialog.Heading>{title}</AlertDialog.Heading></AlertDialog.Header>
+    <AlertDialog.Body>{children}</AlertDialog.Body>
+    <AlertDialog.Footer><Button slot="close" variant="tertiary" autoFocus>Cancel</Button><Button slot="close" variant="danger" onPress={onConfirm}>{confirmLabel}</Button></AlertDialog.Footer>
+  </AlertDialog.Dialog></AlertDialog.Container></AlertDialog.Backdrop></AlertDialog>;
+}
+