@talgent/workbench-ui 0.0.0 → 0.2.0

package/components/marketplace/marketplace-shell.tsx

@@ -0,0 +1,32 @@
+import { Tabs } from "@heroui/react";
+import type { ReactNode } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { PageLayout } from "../shell/page-layout";
+import { marketplacePaths } from "../../lib/marketplace-routes";
+import "./marketplace.css";
+
+export type Crumb = { label: string; to: string };
+
+const sections = [{ id: "plugins", label: "Plugins", to: marketplacePaths.plugins }, { id: "connectors", label: "Connectors", to: marketplacePaths.connectors }] as const;
+
+// Marketplace is the Plugin and Connector catalog only: its sections
+// switch in the topbar, what the person installed is in the account menu, and
+// Provider Authorizations are on Profile. A Provider page keeps this shell
+// with Profile as its parent and no catalog switch.
+export function MarketplaceShell({ title, trail = [], root = { label: "Marketplace", to: marketplacePaths.plugins }, children }: {
+  title: string; trail?: Crumb[]; root?: Crumb; children: ReactNode;
+}) {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const current = pathname.startsWith(marketplacePaths.connectors) ? "connectors" : "plugins";
+  // The switch shows on the two lists only; a category or detail page leads back by its breadcrumb.
+  const onList = pathname === marketplacePaths.plugins || pathname === marketplacePaths.connectors;
+  const tabs = <Tabs className="p-perspective-tabs" selectedKey={current} onSelectionChange={key => navigate(sections.find(section => section.id === key)!.to)}>
+    <Tabs.ListContainer><Tabs.List aria-label="Marketplace section">{sections.map(section => <Tabs.Tab key={section.id} id={section.id}>{section.label}<Tabs.Indicator /></Tabs.Tab>)}</Tabs.List></Tabs.ListContainer>
+  </Tabs>;
+  return <PageLayout workspaceTitle={title} centerActions={onList ? tabs : undefined} trail={[root, ...trail].map(crumb => ({ label: crumb.label, onPress: () => navigate(crumb.to) }))}>
+    <div className="mk-market">
+      <div className="mk-main">{children}</div>
+    </div>
+  </PageLayout>;
+}

package/components/marketplace/marketplace.css

@@ -0,0 +1,97 @@
+/* Marketplace: a secondary rail beside quiet two-column lists; every
+   object is a page. HeroUI owns component appearance; this file owns layout,
+   capability hues and the icon tiles. */
+:root {
+  --mk-skill: oklch(55% 0.075 210);
+  --mk-agent: oklch(52% 0.1 295);
+  --mk-mcp: oklch(57% 0.09 70);
+  --mk-soft: color-mix(in oklch, var(--foreground) 5%, var(--surface));
+}
+
+.mk-cap { flex-shrink: 0; }
+.mk-cap-skill { color: var(--mk-skill); }
+.mk-cap-agent { color: var(--mk-agent); }
+.mk-cap-mcp { color: var(--mk-mcp); }
+.mk-muted { color: var(--muted); }
+.mk-hint { color: var(--muted); font-weight: 400; }
+
+.mk-market { display: grid; padding: 8px 24px 96px 4px; }
+.mk-main { display: grid; gap: 28px; min-width: 0; width: 100%; max-width: 1080px; margin-inline: auto; }
+.mk-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
+.mk-search { width: min(420px, 100%); }
+.mk-section { display: grid; gap: 8px; }
+.mk-section-head { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; border-radius: 6px; }
+a.mk-section-head:hover svg { transform: translateX(2px); }
+.mk-section-head svg { color: var(--muted); transition: transform 150ms; }
+.mk-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 40px; }
+.mk-row { display: flex; align-items: center; gap: 12px; min-height: 72px; }
+.mk-row-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 10px 8px; margin-left: -8px; border-radius: 14px; text-align: left; }
+.mk-row-open:focus-visible { outline: 2px solid var(--focus); }
+.mk-row-text { display: grid; gap: 2px; min-width: 0; }
+.mk-row-text strong { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; }
+.mk-row-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
+.mk-row[data-off="true"] .mk-row-text strong { color: var(--muted); }
+.mk-row-lock { color: var(--muted); padding: 8px; }
+.mk-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 16px; text-align: center; font-size: 13px; }
+.mk-skeletons { display: grid; gap: 12px; }
+.mk-skeleton { height: 72px; border-radius: 16px; }
+
+.mk-icon { flex-shrink: 0; display: grid; place-items: center; background: color-mix(in oklch, var(--mk-hue) 13%, var(--surface)); color: color-mix(in oklch, var(--mk-hue) 88%, var(--foreground)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--mk-hue) 14%, transparent); }
+.mk-icon-brand { background: var(--surface); box-shadow: inset 0 0 0 1px var(--separator), 0 1px 2px oklch(0 0 0 / 0.04); }
+.mk-brand-mark { display: block; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
+.mk-icon-letter { font-weight: 600; }
+.mk-icon-stack { position: relative; flex-shrink: 0; display: inline-grid; }
+.mk-icon-badge { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; padding: 2px; border-radius: 50%; background: var(--surface); color: var(--mk-mcp); box-shadow: 0 0 0 1px var(--separator); }
+
+/* Item pages (Plugin, Connector, Provider) share one anatomy. */
+.mk-detail { display: grid; gap: 20px; max-width: 880px; }
+.mk-detail-head { display: flex; align-items: flex-start; gap: 20px; }
+.mk-detail-title { flex: 1; min-width: 0; display: grid; gap: 6px; }
+.mk-detail-title h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
+.mk-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
+.mk-meta > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 3px -8px; border-radius: 50%; background: currentColor; opacity: 0.5; vertical-align: middle; }
+.mk-detail-actions { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding-top: 4px; }
+.mk-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
+.mk-section-title { font-size: 15px; font-weight: 600; }
+.mk-section-title .mk-count { margin-left: 6px; font-weight: 400; color: var(--muted); }
+.mk-detail .mk-section { gap: 10px; }
+.mk-kind { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--mk-soft); font-size: 11px; font-weight: 500; color: var(--muted); vertical-align: 1px; }
+.mk-group { padding: 4px 18px; gap: 0; border-radius: 18px; }
+.mk-group-list { list-style: none; margin: 0; padding: 0; }
+.mk-group-list > li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; }
+.mk-group-list > li + li { border-top: 1px solid var(--separator); }
+.mk-group-list > li > .mk-cap { margin-top: 3px; }
+.mk-group-list .mk-row-text span { white-space: normal; }
+.mk-group-list code { font: 500 13.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.mk-group-link { padding: 0 !important; }
+.mk-group-link > a { display: flex; align-items: center; gap: 12px; width: calc(100% + 16px); margin: 0 -8px; padding: 12px 8px; border-radius: 12px; text-align: left; }
+.mk-group-link > a:focus-visible { outline: 2px solid var(--focus); }
+.mk-group-split { display: flex !important; align-items: center; gap: 12px; }
+.mk-group-split > a { flex: 1; width: auto; margin-right: 0; min-width: 0; }
+.mk-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, max-content); gap: 12px 32px; padding: 20px 22px; }
+.mk-about-single { grid-template-columns: 1fr; }
+.mk-about-main { display: grid; gap: 12px; align-content: start; }
+.mk-about-text { font-size: 15px; line-height: 1.7; max-width: 60ch; }
+.mk-about-facts { display: grid; gap: 8px; margin: 0; font-size: 13px; align-content: start; padding-left: 24px; border-left: 1px solid var(--separator); }
+.mk-about-facts > div { display: flex; justify-content: space-between; gap: 24px; }
+.mk-about-facts dt { color: var(--muted); }
+.mk-about-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
+.mk-keywords { display: flex; flex-wrap: wrap; gap: 6px; }
+.mk-settings-card { padding: 20px 22px; }
+.mk-form { display: grid; gap: 16px; max-width: 560px; }
+.mk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
+.mk-section-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.mk-section-actions { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
+.mk-manage { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
+.mk-note { font-size: 13px; color: var(--muted); }
+
+@media (max-width: 1100px) {
+  .mk-rows { grid-template-columns: 1fr; }
+}
+@media (max-width: 740px) {
+  .mk-about { grid-template-columns: 1fr; }
+  .mk-about-facts { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--separator); }
+  .mk-market { padding: 12px 16px 96px; }
+  .mk-detail-head { flex-wrap: wrap; }
+  .mk-detail-actions { width: 100%; }
+}

package/components/marketplace/parameter-fields.tsx

@@ -0,0 +1,46 @@
+import { toJson } from "@bufbuild/protobuf";
+import { ValueSchema } from "@bufbuild/protobuf/wkt";
+import { Description, FieldError, Input, Label, ListBox, Select, Switch, TextArea, TextField } from "@heroui/react";
+import type { ParameterDeclaration } from "@talgent/workbench-contracts/marketplace/public/v1/marketplace_pb";
+import { hasDefault, parameterLabel, type ParameterDrafts, type ParameterErrors } from "../../lib/plugin-parameters";
+
+function defaultText(declaration: ParameterDeclaration) {
+  if (declaration.sensitive || !declaration.default) return "";
+  const value = toJson(ValueSchema, declaration.default);
+  return Array.isArray(value) ? value.join(", ") : String(value);
+}
+
+// Fields follow the published declarations. Sensitive values are never echoed:
+// a saved one shows only that it exists and can be replaced.
+export function ParameterFields({ declarations, drafts, errors = {}, redacted = [], inherited, onChange }: {
+  declarations: Record<string, ParameterDeclaration>; drafts: ParameterDrafts; errors?: ParameterErrors; redacted?: string[];
+  /** Personal values a Work override starts from, shown as a hint. */
+  inherited?: ParameterDrafts; onChange: (name: string, value: string) => void;
+}) {
+  return <div className="mk-form">{Object.entries(declarations).map(([name, declaration]) => {
+    const fallback = defaultText(declaration);
+    const hint = inherited?.[name] !== undefined ? `Your default: ${inherited[name]}.` : fallback ? `Default: ${fallback}.` : "";
+    const optional = !declaration.required || hasDefault(declaration);
+    const label = <Label>{parameterLabel(name, declaration)}{optional && <span className="mk-hint"> (optional)</span>}</Label>;
+    const description = [declaration.description, hint, declaration.multiple ? "One value per line." : "", declaration.sensitive ? "Stored securely and never shown again." : ""].filter(Boolean).join(" ");
+    if (declaration.type === "boolean" && !declaration.multiple) {
+      const selected = (drafts[name] ?? inherited?.[name] ?? fallback) === "true";
+      return <Switch key={name} isSelected={selected} onChange={value => onChange(name, String(value))}>
+        <Switch.Control><Switch.Thumb /></Switch.Control><Switch.Content>{label}<Description>{description}</Description></Switch.Content>
+      </Switch>;
+    }
+    if (declaration.options.length && !declaration.multiple) {
+      return <Select key={name} name={name} value={drafts[name] || null} isInvalid={Boolean(errors[name])} onChange={value => onChange(name, String(value ?? ""))} placeholder="Choose an option" fullWidth variant="secondary">
+        {label}<Select.Trigger><Select.Value /><Select.Indicator /></Select.Trigger><Description>{description}</Description>{errors[name] && <FieldError>{errors[name]}</FieldError>}
+        <Select.Popover><ListBox>{declaration.options.map(option => <ListBox.Item key={option} id={option} textValue={option}><Label>{option}</Label><ListBox.ItemIndicator /></ListBox.Item>)}</ListBox></Select.Popover>
+      </Select>;
+    }
+    const saved = declaration.sensitive && redacted.includes(name);
+    return <TextField key={name} name={name} value={drafts[name] ?? ""} onChange={value => onChange(name, value)} isInvalid={Boolean(errors[name])} type={declaration.sensitive ? "password" : "text"} fullWidth variant="secondary">
+      {label}
+      {declaration.multiple ? <TextArea rows={3} placeholder={fallback} /> : <Input autoComplete="off" inputMode={declaration.type === "number" ? "decimal" : undefined} placeholder={saved ? "Saved — enter a new value to replace it" : fallback} />}
+      <Description>{description}</Description>
+      {errors[name] && <FieldError>{errors[name]}</FieldError>}
+    </TextField>;
+  })}</div>;
+}

package/components/marketplace/plugin-list.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { Button, Dropdown, Label, Tooltip } from "@heroui/react";
+import type { InstalledPlugin, PluginSummary } from "@talgent/workbench-contracts/marketplace/public/v1/marketplace_pb";
+import { AlertTriangle, ChevronRight, Lock, MoreHorizontal, Plus } from "lucide-react";
+import { Link, useNavigate } from "react-router-dom";
+import { useInstalledPlugins, usePluginActions, usePluginCatalog } from "../../lib/marketplace-catalog";
+import { groupPluginsByCategory, isPlatformPlugin, pluginPresentation } from "../../lib/marketplace-plugins";
+import { marketplacePaths } from "../../lib/marketplace-routes";
+import { notify } from "../../lib/notifications";
+import { installationNeedsSetup, missingRequired } from "../../lib/plugin-parameters";
+import { PluginIcon } from "./marketplace-icons";
+import { ConfirmDialog, LoadState, NothingMatches, SearchBar } from "./marketplace-shared";
+
+const matches = (plugin: PluginSummary, query: string) => `${pluginPresentation(plugin).name} ${plugin.slug} ${plugin.description}`.toLowerCase().includes(query.trim().toLowerCase());
+
+// Plugins grouped by purpose, "Other" last. A category page shows all of its
+// Plugins; the overview shows the first six of each.
+export function PluginList({ category }: { category?: string }) {
+  const catalog = usePluginCatalog();
+  const installed = useInstalledPlugins();
+  const [query, setQuery] = useState("");
+  const [removing, setRemoving] = useState<{ plugin: PluginSummary; installed: InstalledPlugin } | null>(null);
+  const actions = usePluginActions();
+  const groups = groupPluginsByCategory((catalog.data ?? []).filter(plugin => matches(plugin, query))).filter(group => !category || group.category === category);
+  const uninstall = (target: { plugin: PluginSummary; installed: InstalledPlugin }) => {
+    const name = pluginPresentation(target.plugin).name;
+    actions.uninstall.mutate(target.installed, {
+      onSuccess: () => notify(`plugin:${target.plugin.slug}`, "default", `${name} uninstalled`),
+      onError: () => notify(`plugin:${target.plugin.slug}`, "danger", `${name} couldn’t be uninstalled`, "Refresh and try again."),
+    });
+  };
+  return <>
+    <SearchBar label={category ? `Search ${category.toLowerCase()} plugins` : "Search plugins"} value={query} onChange={setQuery} />
+    <LoadState noun="plugins" isPending={catalog.isPending} isError={catalog.isError} hasData={Boolean(catalog.data)} isFetching={catalog.isFetching} onRetry={() => void catalog.refetch()} />
+    {catalog.data && catalog.data.length === 0 && <div className="mk-empty"><p><strong>No plugins yet</strong></p><p className="mk-muted">Plugins appear here once the platform publishes them.</p></div>}
+    {catalog.data && catalog.data.length > 0 && (groups.length === 0 ? <NothingMatches onClear={() => setQuery("")} />
+      : groups.map(group => <section key={group.category} className="mk-section" aria-label={group.category}>
+        {!category && <Link className="mk-section-head" to={marketplacePaths.pluginCategory(group.category)}>{group.category}<ChevronRight size={18} aria-hidden="true" /></Link>}
+        <ul className="mk-rows">{(category ? group.plugins : group.plugins.slice(0, 6)).map(plugin => <PluginRow key={plugin.slug} plugin={plugin} installed={installed.data?.get(plugin.slug)} onUninstall={value => setRemoving({ plugin, installed: value })} />)}</ul>
+      </section>))}
+    <ConfirmDialog isOpen={removing !== null} onOpenChange={open => { if (!open) setRemoving(null); }} title={`Uninstall ${removing ? pluginPresentation(removing.plugin).name : ""}?`} confirmLabel="Uninstall" onConfirm={() => { if (removing) uninstall(removing); }}>
+      <p>Your saved settings are removed. Works already running keep it. Connectors and connected Providers aren’t affected.</p>
+    </ConfirmDialog>
+  </>;
+}
+
+function PluginRow({ plugin, installed, onUninstall }: { plugin: PluginSummary; installed?: InstalledPlugin; onUninstall: (installed: InstalledPlugin) => void }) {
+  const navigate = useNavigate();
+  const actions = usePluginActions();
+  const { name } = pluginPresentation(plugin);
+  const needsSetup = installed ? installationNeedsSetup(plugin.parameters, installed) : false;
+  const install = () => {
+    // Required settings are entered on the Plugin page, never half-installed.
+    if (missingRequired(plugin.parameters, {}).length) { navigate(marketplacePaths.plugin(plugin.slug)); return; }
+    actions.install.mutate({ slug: plugin.slug, configuration: {} }, {
+      onSuccess: result => notify(`plugin:${plugin.slug}`, "success", `${name} installed`, "Works you start from now on include it.", {
+        action: { label: "Undo", onPress: () => actions.uninstall.mutate(result, { onSuccess: () => notify(`plugin:${plugin.slug}`, "default", `${name} uninstalled`) }) },
+      }),
+      onError: () => notify(`plugin:${plugin.slug}`, "danger", `${name} couldn’t be installed`, "Try again from its page."),
+    });
+  };
+  const toggle = (value: InstalledPlugin) => actions.setEnabled.mutate({ installed: value, enabled: !value.enabled }, {
+    onSuccess: () => notify(`plugin:${plugin.slug}`, "default", `${name} ${value.enabled ? "disabled" : "enabled"}`),
+    onError: () => notify(`plugin:${plugin.slug}`, "danger", `${name} couldn’t be changed`, "Refresh and try again."),
+  });
+  return <li className="mk-row" data-off={installed ? !installed.enabled : undefined}>
+    <Link className="mk-row-open" to={marketplacePaths.plugin(plugin.slug)}>
+      <PluginIcon plugin={plugin} />
+      <span className="mk-row-text"><strong>{name}{needsSetup && <AlertTriangle size={13} className="text-warning" aria-label="Needs attention" />}</strong><span>{installed && !installed.enabled ? "Disabled" : plugin.description}</span></span>
+    </Link>
+    {isPlatformPlugin(plugin.slug) ? <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={`${name} options`}><MoreHorizontal size={18} /></Button>
+        <Dropdown.Popover placement="bottom end"><Dropdown.Menu aria-label={`${name} options`} onAction={key => {
+          if (key === "open") navigate(marketplacePaths.plugin(plugin.slug));
+          if (key === "toggle") toggle(installed);
+          if (key === "uninstall") onUninstall(installed);
+        }}>
+          <Dropdown.Item id="open" textValue="Open"><Label>Open</Label></Dropdown.Item>
+          <Dropdown.Item id="toggle" textValue={installed.enabled ? "Disable" : "Enable"}><Label>{installed.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={actions.install.isPending} aria-label={missingRequired(plugin.parameters, {}).length ? `Set up ${name}` : `Install ${name}`} onPress={install}><Plus size={20} strokeWidth={1.75} /></Button>}
+  </li>;
+}

package/components/marketplace/plugin-page.tsx

@@ -0,0 +1,133 @@
+import { useRef, useState } from "react";
+import { Alert, Button, Card, Chip, Dropdown, Label, Link as HeroLink, Switch } from "@heroui/react";
+import type { InstalledPlugin, PluginRelease } from "@talgent/workbench-contracts/marketplace/public/v1/marketplace_pb";
+import { ChevronRight, Lock, MoreHorizontal } from "lucide-react";
+import { Link } from "react-router-dom";
+import { useInstalledPlugins, usePluginActions } from "../../lib/marketplace-catalog";
+import { isPlatformPlugin, pluginPresentation } from "../../lib/marketplace-plugins";
+import { marketplacePaths } from "../../lib/marketplace-routes";
+import { notify } from "../../lib/notifications";
+import { draftsFrom, missingRequired, parameterLabel, parseParameters, type ParameterDrafts, type ParameterErrors } from "../../lib/plugin-parameters";
+import { serviceLabel } from "../../lib/marketplace-connections";
+import { ConnectorIcon, PluginIcon } from "./marketplace-icons";
+import { CapIcon, ConfirmDialog } from "./marketplace-shared";
+import { ParameterFields } from "./parameter-fields";
+
+// Marketplace › Plugins › Name. The header carries identity and actions; the
+// body explains what the Plugin brings into a Work. Skills and Agents appear
+// only here, never in Marketplace lists.
+export function PluginPage({ plugin }: { plugin: PluginRelease }) {
+  const installedPlugins = useInstalledPlugins();
+  const installed = installedPlugins.data?.get(plugin.slug);
+  const actions = usePluginActions();
+  const presentation = pluginPresentation(plugin);
+  const [drafts, setDrafts] = useState<ParameterDrafts>({});
+  const [errors, setErrors] = useState<ParameterErrors>({});
+  const [confirm, setConfirm] = useState(false);
+  const form = useRef<HTMLFormElement>(null);
+  const platform = isPlatformPlugin(plugin.slug);
+  const saved = { configuration: installed?.configuration, redacted: installed?.redactedParameters };
+  const missing = installed ? missingRequired(plugin.parameters, saved) : [];
+  const values = { ...draftsFrom(installed?.configuration), ...drafts };
+  const hasSettings = Object.keys(plugin.parameters).length > 0;
+
+  const submit = () => {
+    const parsed = parseParameters(plugin.parameters, drafts, saved);
+    setErrors(parsed.errors);
+    const invalid = Object.keys(parsed.errors)[0];
+    if (invalid) { form.current?.querySelector<HTMLElement>(`[name="${CSS.escape(invalid)}"]`)?.focus(); return; }
+    const name = presentation.name;
+    if (!installed) {
+      actions.install.mutate({ slug: plugin.slug, configuration: parsed.values }, {
+        onSuccess: result => { setDrafts({}); notify(`plugin:${plugin.slug}`, "success", `${name} installed`, "Works you start from now on include it.", { action: { label: "Undo", onPress: () => actions.uninstall.mutate(result) } }); },
+        onError: () => notify(`plugin:${plugin.slug}`, "danger", `${name} couldn’t be installed`, "Check the settings and try again."),
+      });
+      return;
+    }
+    // A blank field that had a saved value clears that setting.
+    const cleared = Object.entries(drafts).filter(([key, value]) => !value.trim() && installed.configuration?.[key] !== undefined).map(([key]) => key);
+    actions.configure.mutate({ installed, values: parsed.values, cleared }, {
+      onSuccess: () => { setDrafts({}); notify(`plugin:${plugin.slug}`, "success", "Settings saved", "Works you start from now on use them."); },
+      onError: () => notify(`plugin:${plugin.slug}`, "danger", "Settings couldn’t be saved", "Check the values and try again."),
+    });
+  };
+  const toggle = (value: InstalledPlugin) => actions.setEnabled.mutate({ installed: value, enabled: !value.enabled }, {
+    onSuccess: () => notify(`plugin:${plugin.slug}`, "default", `${presentation.name} ${value.enabled ? "disabled" : "enabled"}`),
+    onError: () => notify(`plugin:${plugin.slug}`, "danger", `${presentation.name} couldn’t be changed`, "Refresh and try again."),
+  });
+
+  return <div className="mk-detail">
+    <header className="mk-detail-head">
+      <PluginIcon plugin={plugin} size={64} />
+      <div className="mk-detail-title"><h2>{presentation.name}</h2><p className="mk-meta"><span>{presentation.category}</span><span>Version {plugin.version}</span></p></div>
+      <div className="mk-detail-actions">
+        {platform ? <span className="mk-muted mk-inline"><Lock size={15} aria-hidden="true" />Always enabled</span>
+          : !installed ? <Button variant="primary" isPending={actions.install.isPending} isDisabled={installedPlugins.isPending} onPress={submit}>Install</Button>
+          : <>
+            <Switch isSelected={installed.enabled} isDisabled={actions.setEnabled.isPending} onChange={() => toggle(installed)} aria-label={`Enable ${presentation.name}`}><Switch.Control><Switch.Thumb /></Switch.Control></Switch>
+            <Dropdown><Button size="sm" variant="ghost" isIconOnly aria-label={`More actions for ${presentation.name}`}><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>
+
+    {installed && <ConfirmDialog isOpen={confirm} onOpenChange={setConfirm} title={`Uninstall ${presentation.name}?`} confirmLabel="Uninstall" onConfirm={() => actions.uninstall.mutate(installed, {
+      onSuccess: () => notify(`plugin:${plugin.slug}`, "default", `${presentation.name} uninstalled`),
+      onError: () => notify(`plugin:${plugin.slug}`, "danger", `${presentation.name} couldn’t be uninstalled`, "Refresh and try again."),
+    })}><p>Your saved settings are removed. Works already running keep it. Connectors and connected Providers aren’t affected.</p></ConfirmDialog>}
+    {missing.length > 0 && <Alert status="warning"><Alert.Indicator /><Alert.Content>
+      <Alert.Title>Version {plugin.version} needs {missing.map(name => parameterLabel(name, plugin.parameters[name]).toLowerCase()).join(", ")}</Alert.Title>
+      <Alert.Description>Works you start ask for it first. Add it under Settings to stop being asked.</Alert.Description>
+    </Alert.Content></Alert>}
+
+    <section className="mk-section" aria-labelledby="mk-about">
+      <h3 id="mk-about" className="mk-section-title">About</h3>
+      <Card className={`mk-group mk-about${presentation.author || presentation.license || presentation.homepage ? "" : " mk-about-single"}`}>
+        <div className="mk-about-main">
+          <p className="mk-about-text">{plugin.description}</p>
+          {presentation.keywords.length > 0 && <p className="mk-keywords">{presentation.keywords.map(word => <Chip key={word} size="sm" variant="soft"><Chip.Label>{word}</Chip.Label></Chip>)}</p>}
+        </div>
+        {(presentation.author || presentation.license || presentation.homepage) && <dl className="mk-about-facts">
+          {presentation.author && <div><dt>Author</dt><dd>{presentation.author}</dd></div>}
+          {presentation.license && <div><dt>License</dt><dd>{presentation.license}</dd></div>}
+          {presentation.homepage && <div><dt>Homepage</dt><dd><HeroLink href={presentation.homepage} target="_blank" rel="noreferrer">{presentation.homepage.replace(/^https:\/\//, "")}</HeroLink></dd></div>}
+        </dl>}
+      </Card>
+    </section>
+
+    {plugin.skills.length > 0 && <Group title="Skills" count={plugin.skills.length}>{plugin.skills.map(skill => <li key={skill.name}>
+      <CapIcon kind="skill" />
+      <span className="mk-row-text"><strong><code>/{skill.name}</code>{skill.argumentHint && <span className="mk-hint"> {skill.argumentHint}</span>}</strong><span>{skill.description}</span></span>
+    </li>)}</Group>}
+    {plugin.agents.length > 0 && <Group title="Agents" count={plugin.agents.length}>{plugin.agents.map(agent => <li key={agent.name}>
+      <CapIcon kind="agent" /><span className="mk-row-text"><strong>{agent.name.split(":").at(-1)}</strong><span>{agent.description}</span></span>
+    </li>)}</Group>}
+    {plugin.mcpServers.length > 0 && <Group title="Connectors" count={plugin.mcpServers.length}>{plugin.mcpServers.map(server => {
+      const connector = server.relationship?.status === "supported" ? server.relationship.connectorName : "";
+      // A declaration without a catalog Connector still loads with the Plugin.
+      return connector ? <li key={server.name} className="mk-group-link"><Link to={marketplacePaths.connector(connector)}>
+        <ConnectorIcon name={connector} size={32} /><span className="mk-row-text"><strong>{serviceLabel(connector)}</strong><span>MCP connector</span></span><ChevronRight size={16} className="mk-muted ml-auto" aria-hidden="true" />
+      </Link></li> : <li key={server.name}><CapIcon kind="mcp" /><span className="mk-row-text"><strong>{server.name}</strong><span>Loads with this plugin · not in the Connector catalog</span></span></li>;
+    })}</Group>}
+
+    {!platform && hasSettings && <section className="mk-section">
+      <h3 className="mk-section-title">Settings</h3>
+      <Card className="mk-group mk-settings-card">
+        <form ref={form} noValidate className="mk-form" onSubmit={event => { event.preventDefault(); submit(); }}>
+          <ParameterFields declarations={plugin.parameters} drafts={values} errors={errors} redacted={installed?.redactedParameters}
+            onChange={(name, value) => { setDrafts(current => ({ ...current, [name]: value })); setErrors(current => ({ ...current, [name]: "" })); }} />
+          {installed && <div className="mk-actions"><Button type="submit" variant="secondary" isPending={actions.configure.isPending} isDisabled={!Object.keys(drafts).length}>Save settings</Button></div>}
+        </form>
+      </Card>
+    </section>}
+  </div>;
+}
+
+function Group({ title, count, children }: { title: string; count: number; children: React.ReactNode }) {
+  return <section className="mk-section">
+    <h3 className="mk-section-title">{title} <span className="mk-count">{count}</span></h3>
+    <Card className="mk-group"><ul className="mk-group-list">{children}</ul></Card>
+  </section>;
+}

package/components/marketplace/provider-pages.tsx

@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { Alert, Button, Card, Link as HeroLink, Spinner } from "@heroui/react";
+import type { ProviderAccount } from "@talgent/workbench-contracts/marketplace/public/v1/connections_pb";
+import { Check, ChevronRight, ExternalLink, RefreshCw } from "lucide-react";
+import { Link, useLocation } from "react-router-dom";
+import { connectorStatus, installStatusLabel, useConnectors } from "../../lib/marketplace-catalog";
+import { providerName, serviceLabel, supportedProviders, useConnectProvider, useDisconnectProvider, useProviderAccess, useProviderConnection, useRefreshProviderAccess } from "../../lib/marketplace-connections";
+import { marketplacePaths } from "../../lib/marketplace-routes";
+import { notify } from "../../lib/notifications";
+import { timeAgo } from "../../lib/relative-time";
+import { ConnectorIcon, ProviderIcon } from "./marketplace-icons";
+import { ConfirmDialog, LoadState } from "./marketplace-shared";
+
+const descriptions: Record<string, string> = { github: "Repositories, issues and pull requests on GitHub." };
+type Connection = "connected" | "not_connected" | "reconnect_required";
+const connectionOf = (status?: string): Connection => status === "active" ? "connected" : status === "reconnect_required" ? "reconnect_required" : "not_connected";
+const connectionText: Record<Connection, string> = { connected: "Connected", not_connected: "Not connected", reconnect_required: "Authorization expired" };
+
+// Every supported Provider with the person's Provider Authorization state; a
+// row opens the Provider page. Profile lists them.
+export function ProviderRows() {
+  return <ul className="mk-rows">{supportedProviders.map(provider => <ProviderRow key={provider} provider={provider} />)}</ul>;
+}
+
+// A row shows the stored status only; who is connected and what the
+// authorization reaches are shown on its page.
+function ProviderRow({ provider }: { provider: string }) {
+  const access = useProviderConnection(provider);
+  const connection = connectionOf(access.data?.state?.status);
+  return <li className="mk-row"><Link className="mk-row-open" to={marketplacePaths.provider(provider)}>
+    <ProviderIcon id={provider} /><span className="mk-row-text"><strong>{providerName(provider)}</strong>
+      <span className={connection === "reconnect_required" || (access.isError && !access.data) ? "text-warning" : ""}>{access.isPending ? "Checking…" : access.isError && !access.data ? "Connection status unavailable" : connectionText[connection]}</span></span>
+  </Link></li>;
+}
+
+// A Provider page: connecting never installs anything and applies to Works
+// started afterwards. What the authorization reaches is decided on GitHub and
+// shown as last seen; Refresh asks GitHub again.
+export function ProviderPage({ provider }: { provider: string }) {
+  const access = useProviderAccess(provider);
+  const refresh = useRefreshProviderAccess(provider);
+  const connectors = useConnectors();
+  const connect = useConnectProvider();
+  const disconnect = useDisconnectProvider();
+  const { pathname } = useLocation();
+  const [confirm, setConfirm] = useState(false);
+  const name = providerName(provider);
+  if (!access.data) return <LoadState noun={`${name} connection`} isPending={access.isPending} isError={access.isError} hasData={false} isFetching={access.isFetching} onRetry={() => void access.refetch()} />;
+  const state = access.data.state;
+  const connection = connectionOf(state?.status);
+  const observed = access.data.observedAtUnixMs ? new Date(Number(access.data.observedAtUnixMs)) : null;
+  const used = (connectors.data ?? []).filter(item => item.provider === provider);
+  const affected = used.filter(item => connectorStatus(item) !== "not_installed");
+  const start = () => connect.mutate({ provider, returnTo: pathname });
+  const confirmDisconnect = () => {
+    if (!state?.authorizationId) return;
+    disconnect.mutate(state.authorizationId, {
+      onSuccess: () => notify(`provider:${provider}`, "default", `${name} disconnected`, "Works you start afterwards can’t use it."),
+      onError: () => notify(`provider:${provider}`, "danger", `${name} couldn’t be disconnected`, "GitHub didn’t confirm it. Try again."),
+    });
+  };
+  return <div className="mk-detail">
+    <header className="mk-detail-head">
+      <ProviderIcon id={provider} size={64} />
+      <div className="mk-detail-title"><h2>{name}</h2><p className="mk-meta"><span>Provider</span><span className={connection === "reconnect_required" ? "text-warning" : ""}>{connectionText[connection]}</span></p></div>
+      <div className="mk-detail-actions">
+        {connection === "connected" ? <Button variant="ghost" className="text-danger" isPending={disconnect.isPending} onPress={() => setConfirm(true)}>Disconnect</Button>
+          : <Button variant="primary" isPending={connect.isPending} onPress={start}>{connection === "reconnect_required" ? `Reconnect ${name}` : `Connect ${name}`}</Button>}
+      </div>
+    </header>
+    <ConfirmDialog isOpen={confirm} onOpenChange={setConfirm} title={`Disconnect ${name}?`} confirmLabel="Disconnect" onConfirm={confirmDisconnect}>
+      <p>Works you start afterwards can’t use {name} until you connect again. Works already running keep their access.</p>
+      {affected.length > 0 && <><p className="mt-2">These connectors stay installed but need you to connect again:</p><ul className="mt-1 list-disc pl-5">{affected.map(item => <li key={item.name}>{serviceLabel(item.name)}</li>)}</ul></>}
+    </ConfirmDialog>
+    {connection === "reconnect_required" && <Alert status="warning"><Alert.Indicator /><Alert.Content><Alert.Title>Your {name} authorization expired</Alert.Title><Alert.Description>New Works start without {name} access until you reconnect. Running Works aren’t changed.</Alert.Description></Alert.Content></Alert>}
+    {access.data.accessUnavailable && <Alert status="warning"><Alert.Indicator /><Alert.Content><Alert.Title>{name} couldn’t be checked</Alert.Title><Alert.Description>Showing what it allowed when last seen. Your connection is unchanged.</Alert.Description>
+      <Button size="sm" variant="secondary" className="mt-2" isPending={refresh.isPending} onPress={() => refresh.mutate()}>Try again</Button></Alert.Content></Alert>}
+
+    <section className="mk-section"><h3 className="mk-section-title">About</h3>
+      <Card className="mk-group mk-about">
+        <div className="mk-about-main"><p className="mk-about-text">{descriptions[provider]} Only you can use this authorization. Works you start after connecting can use it; Works already running keep the access they started with.</p></div>
+        <dl className="mk-about-facts">
+          <div><dt>Account</dt><dd>{connection === "not_connected" ? "—" : state?.providerLogin}</dd></div>
+          <div><dt>Status</dt><dd>{connectionText[connection]}</dd></div>
+        </dl>
+      </Card>
+    </section>
+
+    {access.data.permissions.length > 0 && <section className="mk-section">
+      <h3 className="mk-section-title">{connection === "connected" ? "Permissions" : "Talgent will ask to"}</h3>
+      <Card className="mk-group"><ul className="mk-group-list">{access.data.permissions.map(permission => <li key={permission.name}>
+        <Check size={16} className="mk-muted" aria-hidden="true" /><span className="mk-row-text"><strong>{serviceLabel(permission.name)}</strong><span>{permission.access === "write" ? "Read and write" : permission.access === "admin" ? "Admin" : "Read only"}</span></span>
+      </li>)}</ul></Card>
+    </section>}
+
+    {connection === "connected" && <section className="mk-section">
+      <div className="mk-section-bar"><h3 className="mk-section-title">Organizations <span className="mk-count">{access.data.accounts.length}</span></h3>
+        <span className="mk-section-actions">
+          <span className="mk-note">{observed ? `Checked ${timeAgo(observed)}` : "Not checked yet"}</span>
+          <Button size="sm" variant="ghost" isPending={refresh.isPending} onPress={() => refresh.mutate()}>{({ isPending }) => <>{isPending ? <Spinner color="current" size="sm" /> : <RefreshCw size={14} aria-hidden="true" />}Refresh</>}</Button>
+          {access.data.manageUrl && <HeroLink href={access.data.manageUrl} target="_blank" rel="noreferrer" className="mk-manage">Manage on {name}<ExternalLink size={13} aria-hidden="true" /></HeroLink>}
+        </span></div>
+      {access.data.accounts.length ? <Card className="mk-group"><ul className="mk-group-list">{access.data.accounts.map(account => <li key={account.login}>
+        <span className="mk-row-text"><strong>{account.login}</strong><span>{scope(account)}</span></span>
+        {account.settingsUrl && <HeroLink href={account.settingsUrl} target="_blank" rel="noreferrer" className="mk-manage ml-auto" aria-label={`Change access for ${account.login} on ${name}`}><ExternalLink size={13} /></HeroLink>}
+      </li>)}</ul></Card> : <p className="mk-note">{observed ? `${name} doesn’t allow Talgent into any account yet. Add accounts and repositories on ${name}.` : `Refresh to see which accounts ${name} allows.`}</p>}
+      <p className="mk-note">Works can check out the repositories these accounts allow. Change which ones on {name}.</p>
+    </section>}
+
+    {used.length > 0 && <section className="mk-section">
+      <h3 className="mk-section-title">Connectors that use it <span className="mk-count">{used.length}</span></h3>
+      <Card className="mk-group"><ul className="mk-group-list">{used.map(item => <li key={item.name} className="mk-group-link"><Link to={marketplacePaths.connector(item.name)}>
+        <ConnectorIcon name={item.name} size={32} /><span className="mk-row-text"><strong>{serviceLabel(item.name)}<span className="mk-kind">Connector</span></strong><span>{installStatusLabel[connectorStatus(item)]}</span></span>
+        <ChevronRight size={16} className="mk-muted ml-auto" aria-hidden="true" />
+      </Link></li>)}</ul></Card>
+    </section>}
+  </div>;
+}
+
+const scope = (account: ProviderAccount) => `${account.type === "Organization" ? "Organization" : "Personal account"} · ${account.repositorySelection === "all" ? "All repositories" : `${account.repositories.length} selected ${account.repositories.length === 1 ? "repository" : "repositories"}`}`;

package/components/preview/file-format.ts

@@ -0,0 +1,75 @@
+import { code } from "@streamdown/code";
+
+/**
+ * How text content is shown, decided by the file extension alone:
+ * content is never sniffed, so a `.log` holding `<div>` stays plain text.
+ */
+export type TextFormat =
+  | { kind: "markdown" }
+  | { kind: "html" }
+  | { kind: "svg" }
+  | { kind: "diff" }
+  | { kind: "code"; language: string }
+  | { kind: "text" };
+
+// Extensions whose Shiki language id differs from the extension itself; any
+// other extension that is a Shiki language id or alias highlights as that.
+const LANGUAGE_BY_EXT: Record<string, string> = {
+  ts: "typescript", mts: "typescript", cts: "typescript", js: "javascript", mjs: "javascript", cjs: "javascript",
+  py: "python", pyi: "python", rs: "rust", rb: "ruby", kt: "kotlin", kts: "kotlin", cs: "csharp",
+  h: "c", hpp: "cpp", cc: "cpp", cxx: "cpp", hh: "cpp", sh: "bash", zsh: "bash", yml: "yaml",
+  proto: "proto", tf: "terraform", ex: "elixir", exs: "elixir", erl: "erlang", hs: "haskell",
+  ml: "ocaml", fs: "fsharp", pl: "perl", ps1: "powershell", psm1: "powershell", bat: "bat", cmd: "bat",
+  sol: "solidity", m: "objective-c", mm: "objective-cpp", vue: "vue", svelte: "svelte", astro: "astro",
+  gql: "graphql", jsonc: "jsonc", json5: "json5", ndjson: "json", jsonl: "json", ipynb: "json",
+  xml: "xml", xsd: "xml", xsl: "xml", plist: "xml", ini: "ini", cfg: "ini", conf: "ini", env: "dotenv",
+  dockerfile: "docker", mk: "make", cmake: "cmake", gradle: "groovy", sbt: "scala", sql: "sql",
+};
+// File names without an extension that still name a language.
+const LANGUAGE_BY_NAME: Record<string, string> = {
+  dockerfile: "docker", containerfile: "docker", makefile: "make", gnumakefile: "make",
+  jenkinsfile: "groovy", gemfile: "ruby", rakefile: "ruby", ".bashrc": "bash", ".zshrc": "bash",
+};
+// Shiki knows these, but they read as the text they are.
+const PLAIN_EXTENSIONS = new Set(["txt", "text", "log", "csv", "tsv", "out", "err"]);
+
+export function fileName(path?: string): string {
+  return path?.split(/[?#]/, 1)[0]?.split("/").pop() ?? "";
+}
+
+export function fileExtension(path?: string): string | undefined {
+  return fileName(path).match(/.\.([^.]+)$/)?.[1]?.toLowerCase();
+}
+
+/** The Shiki language for a path, or undefined when it is not code. */
+export function codeLanguage(path?: string): string | undefined {
+  const name = fileName(path).toLowerCase();
+  const ext = fileExtension(path);
+  if (!ext) return LANGUAGE_BY_NAME[name];
+  if (PLAIN_EXTENSIONS.has(ext)) return undefined;
+  const language = LANGUAGE_BY_EXT[ext] ?? ext;
+  return code.supportsLanguage(language as Parameters<typeof code.supportsLanguage>[0]) ? language : undefined;
+}
+
+export function textFormat(path?: string): TextFormat {
+  switch (fileExtension(path)) {
+    case "md": case "markdown": return { kind: "markdown" };
+    case "html": case "htm": return { kind: "html" };
+    case "svg": return { kind: "svg" };
+    case "diff": case "patch": return { kind: "diff" };
+  }
+  const language = codeLanguage(path);
+  return language ? { kind: "code", language } : { kind: "text" };
+}
+
+/** The Shiki language a format's source reads in, for source views. */
+export function sourceLanguage(format: TextFormat): string {
+  switch (format.kind) {
+    case "markdown": return "markdown";
+    case "html": return "html";
+    case "svg": return "xml";
+    case "diff": return "diff";
+    case "code": return format.language;
+    case "text": return "text";
+  }
+}