@talgent/workbench-ui 0.0.0-stage → 0.1.2

package/pages/workbench/library-page.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { create } from "@bufbuild/protobuf";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import { Alert, Button, Label, ListBox, SearchField, Select, Table } from "@heroui/react";
+import { WorkFileKind, WorkFileSchema } from "@talgent/workbench-contracts/agent/public/v1/work_file_pb";
+import type { LibraryFile, LibraryWork } from "@talgent/workbench-contracts/agent/public/v1/personal_work_pb";
+import { FileText } from "lucide-react";
+import { Link } from "react-router-dom";
+import { formatAgo } from "../../components/analytics/work-usage/work-status";
+import { formatBytes } from "../../components/preview/preview-verdict";
+import { PageLayout } from "../../components/shell/page-layout";
+import { useEntryShell } from "../../components/shell/entry-shell";
+import { useReadingArea } from "../../components/shell/reading-context";
+import { useDebounced } from "../../hooks/use-debounced";
+import { useNow } from "../../lib/use-now";
+import { untitledWorkLabel, useDirectoryUsers, useLibrary } from "../../lib/personal-work-service";
+import { Person } from "./person";
+
+const periods = [{ id: "any", label: "Any time", days: null }, { id: "1", label: "Last 24 hours", days: 1 }, { id: "7", label: "Last 7 days", days: 7 }, { id: "30", label: "Last 30 days", days: 30 }] as const;
+
+/** A Work's name in the Library. */
+function libraryWorkTitle(work: Pick<LibraryWork, "title"> | undefined) {
+  return work?.title || untitledWorkLabel;
+}
+
+const rowKey = (file: LibraryFile) => `${file.workId}/${file.name}`;
+
+/** Library: the Artifacts of the person's Personal Works and of the Works
+ * shared with them, searched by name and narrowed by Work and time. */
+export function LibraryPage() {
+  return <PageLayout workspaceTitle="Library"><LibraryTable /></PageLayout>;
+}
+
+function LibraryTable() {
+  const { personal } = useEntryShell();
+  const reader = useReadingArea();
+  const [name, setName] = useState("");
+  const [workId, setWorkId] = useState("");
+  const [period, setPeriod] = useState<(typeof periods)[number]["id"]>("any");
+  const query = useDebounced(name, 250);
+  const library = useLibrary({ name: query, workId, addedWithinDays: periods.find(item => item.id === period)!.days });
+  const works = library.data?.works ?? [];
+  const files = library.data?.files ?? [];
+  const sharers = useDirectoryUsers(files.map(file => file.sharedByUserId));
+  const filtered = name !== "" || workId !== "" || period !== "any";
+  const clear = () => { setName(""); setWorkId(""); setPeriod("any"); };
+  const title = (file: LibraryFile) => file.workTitle || libraryWorkTitle(works.find(work => work.workId === file.workId));
+  // A Library file is one of its Work's Artifacts.
+  const open = (file: LibraryFile) => reader.open({ kind: "work-file", label: title(file), workId: file.workId,
+    file: create(WorkFileSchema, { workId: file.workId, kind: WorkFileKind.ARTIFACT, name: file.name, sizeBytes: file.sizeBytes, contentType: file.contentType, updatedAt: file.addedAt }) });
+  const now = useNow();
+  return <div className="mx-auto flex w-full max-w-[960px] flex-col gap-6 pb-24 pt-4">
+    <div className="flex flex-wrap gap-3">
+      <SearchField aria-label="Find a file" value={name} onChange={setName} className="w-72"><SearchField.Group><SearchField.SearchIcon /><SearchField.Input placeholder="Find a file" /><SearchField.ClearButton aria-label="Clear search" /></SearchField.Group></SearchField>
+      <Select aria-label="Work" className="w-72" value={workId || "any"} onChange={key => setWorkId(key === "any" || key == null ? "" : String(key))}>
+        <Select.Trigger><Select.Value /><Select.Indicator /></Select.Trigger>
+        <Select.Popover><ListBox>
+          <ListBox.Item id="any" textValue="Any Work">Any Work<ListBox.ItemIndicator /></ListBox.Item>
+          {works.map(work => <ListBox.Item key={work.workId} id={work.workId} textValue={libraryWorkTitle(work)}><Label className="truncate">{libraryWorkTitle(work)}</Label><ListBox.ItemIndicator /></ListBox.Item>)}
+        </ListBox></Select.Popover>
+      </Select>
+      <Select aria-label="Added" className="w-44" value={period} onChange={key => setPeriod((periods.find(item => item.id === key) ?? periods[0]).id)}>
+        <Select.Trigger><Select.Value /><Select.Indicator /></Select.Trigger>
+        <Select.Popover><ListBox>{periods.map(item => <ListBox.Item key={item.id} id={item.id} textValue={item.label}>{item.label}<ListBox.ItemIndicator /></ListBox.Item>)}</ListBox></Select.Popover>
+      </Select>
+    </div>
+    {library.isError && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>Your Library couldn’t be loaded.</Alert.Description></Alert.Content><Button size="sm" variant="secondary" onPress={() => void library.refetch()}>Retry</Button></Alert>}
+    {/* A row opens its file; beside the reading area the table scrolls rather than squeezing its columns. */}
+    <Table><Table.ScrollContainer><Table.Content aria-label="Files" className="w-full min-w-[640px]" onRowAction={key => { const file = files.find(item => rowKey(item) === key); if (file) open(file); }}>
+      <Table.Header><Table.Column isRowHeader>Name</Table.Column><Table.Column>Work</Table.Column><Table.Column className="w-44">Shared by</Table.Column><Table.Column className="w-28">Added</Table.Column><Table.Column className="w-24">Size</Table.Column></Table.Header>
+      <Table.Body renderEmptyState={() => <div className="flex flex-col items-center gap-2 py-8 text-sm text-muted">
+        {library.isPending ? <span role="status">Loading your Library…</span> : library.isError ? null
+          : filtered ? <>No files match these filters.<Button size="sm" variant="secondary" onPress={clear}>Clear filters</Button></> : "Files your Works create show up here."}
+      </div>}>
+        {files.map(file => {
+          const sharer = file.sharedByUserId ? sharers.data?.get(file.sharedByUserId) : undefined;
+          return <Table.Row key={rowKey(file)} id={rowKey(file)}>
+            <Table.Cell><Button variant="ghost" size="sm" className="-ms-2 justify-start" onPress={() => open(file)} aria-label={`Preview ${file.name}`}><FileText size={16} className="text-muted" aria-hidden="true" /><span className="truncate">{file.name}</span></Button></Table.Cell>
+            <Table.Cell><Link className="text-muted hover:underline" to={personal.work(file.workId)}>{title(file)}</Link></Table.Cell>
+            <Table.Cell>{file.sharedByUserId && (sharer ? <Person user={sharer} /> : <span className="text-muted">Someone</span>)}</Table.Cell>
+            <Table.Cell>{file.addedAt ? formatAgo(now - timestampDate(file.addedAt).getTime()) : "—"}</Table.Cell>
+            <Table.Cell>{formatBytes(Number(file.sizeBytes))}</Table.Cell>
+          </Table.Row>;
+        })}
+      </Table.Body>
+    </Table.Content></Table.ScrollContainer></Table>
+  </div>;
+}

package/pages/workbench/new-work-page.tsx

@@ -0,0 +1,24 @@
+import { useNavigate } from "react-router-dom";
+import { PageLayout } from "../../components/shell/page-layout";
+import { useEntryShell } from "../../components/shell/entry-shell";
+import { WorkStartForm } from "../../components/work-start/work-start-form";
+import { personalWorkStartSource, useStartPersonalWork } from "../../lib/personal-work-service";
+import type { WorkStartSource } from "../../lib/work-start-source";
+
+const source: WorkStartSource = { ...personalWorkStartSource, draft: { key: "personal", instruction: "" } };
+
+/** New work: the start form with nothing above it but the question. A
+ * Personal Work's first input names it. */
+export function NewWorkPage() {
+  const navigate = useNavigate();
+  const { personal } = useEntryShell();
+  const start = useStartPersonalWork();
+  return <PageLayout workspaceTitle="New work">
+    <div className="agent-grid">
+      <section className="stream-panel stream-panel-starting" aria-label="Start work"><div className="wpb-stage">
+        <h2 className="wpb-heading">What do you want to work on?</h2>
+        <WorkStartForm source={source} onStart={async input => { navigate(personal.work(await start.mutateAsync(input))); }} />
+      </div></section>
+    </div>
+  </PageLayout>;
+}

package/pages/workbench/person.tsx

@@ -0,0 +1,13 @@
+import { Avatar, Label } from "@heroui/react";
+import type { DirectoryUser } from "@talgent/workbench-contracts/agent/public/v1/personal_work_pb";
+import { avatarInitial, personName, safeAvatarUrl } from "../../lib/user-display";
+
+/** A person of the User Directory: avatar, name and username. */
+export function Person({ user }: { user: DirectoryUser }) {
+  const name = personName(user);
+  const avatar = safeAvatarUrl(user.avatarUrl);
+  return <span className="flex min-w-0 items-center gap-2">
+    <Avatar size="sm" className="size-6 shrink-0">{avatar && <Avatar.Image src={avatar} alt="" />}<Avatar.Fallback className="text-[10px]">{avatarInitial(name, "", "?")}</Avatar.Fallback></Avatar>
+    <Label className="truncate">{name}</Label>{user.username && <span className="truncate text-xs text-muted">@{user.username}</span>}
+  </span>;
+}

package/pages/workbench/personal-work-context.tsx

@@ -0,0 +1,93 @@
+import { useRef, useState, type ReactNode } from "react";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import { Alert, Button } from "@heroui/react";
+import { WorkFileKind, type WorkFile } from "@talgent/workbench-contracts/agent/public/v1/work_file_pb";
+import { Plus } from "lucide-react";
+import { AttachmentConflictDialog, FileSection, type FileRow } from "../../components/files/file-section";
+import { useReadingArea } from "../../components/shell/reading-context";
+import { WorkTokenSection } from "../../components/work/token-usage";
+import { WorkContextRail } from "../../components/work/work-context-rail";
+import { useWorkProgressSection } from "../../components/work/work-progress-section";
+import { useSubAgentsSection } from "../../components/work/subagents-section";
+import { useCurrentUser } from "../../lib/account-service";
+import { NameTakenError } from "../../lib/name-taken-error";
+import type { SubAgent } from "../../lib/subagents";
+import { useWorkTrace } from "../../lib/use-work-trace";
+import { useCreateWorkFileShareLink, useDeleteWorkFile, useDownloadWorkFile, useRenameWorkAttachment, useStopWorkFileSharing, useUploadWorkAttachment, useWorkFiles, workFileKey } from "../../lib/work-file-service";
+import type { WorkProgress } from "../../lib/work-progress";
+import { isTerminalWorkLifecycle } from "../../lib/work-state-presentation";
+
+/** A Work's context card: its Progress, Agents, files and Token Usage. Its
+ * owner changes its files and reads its usage; a Work Share holder reads its
+ * files. Only a Personal Work lists its files here (`withFiles`). */
+export function PersonalWorkContext({ workId, title, owner, withFiles, workLifecycle, workCreatedAt, progress, subAgents }: {
+  workId: string; title: string; owner: boolean; withFiles: boolean; workLifecycle: string; workCreatedAt: Date | null; progress: WorkProgress | null | undefined; subAgents: SubAgent[] | undefined;
+}) {
+  const reader = useReadingArea();
+  const [collapsed, setCollapsed] = useState(false);
+  const visible = !collapsed && !reader.content;
+  const progressSection = useWorkProgressSection({ progress, scope: workId, visible });
+  const subAgentsSection = useSubAgentsSection({ agents: subAgents, scope: workId, visible });
+  const files = useWorkFiles(withFiles ? workId : undefined);
+  const closed = workLifecycle === "closed";
+  const trace = useWorkTrace({ projectId: "", agentWorkId: owner ? workId : null, workCreatedAt, isWorkTerminal: isTerminalWorkLifecycle(workLifecycle) });
+  const hasTokens = owner && Boolean(trace.data?.totals.length || trace.data?.buckets.length || trace.isError);
+  const listed = files.data ?? [];
+  const artifacts = listed.filter(file => file.kind === WorkFileKind.ARTIFACT);
+  const attachments = listed.filter(file => file.kind === WorkFileKind.ATTACHMENT);
+  const editable = withFiles && owner && !closed;
+  const showAttachments = attachments.length > 0 || editable;
+  const upload = useUploadWorkAttachment(workId);
+  // An upload refused for a taken name waits for the person to choose Replace.
+  const [conflict, setConflict] = useState<File | null>(null);
+  const uploadFile = (file: File, replace = false) => upload.mutate({ file, replace }, { onError: error => { if (error instanceof NameTakenError) { upload.reset(); setConflict(file); } } });
+  const fileInput = useRef<HTMLInputElement>(null);
+  const open = (file: WorkFile) => reader.open({ kind: "work-file", label: title, workId, file });
+  const hasContent = Boolean(progress?.items.length || subAgentsSection || artifacts.length || showAttachments || hasTokens);
+
+  return <WorkContextRail hasContent={hasContent} collapsed={collapsed} onCollapsedChange={setCollapsed} beside={!hasContent && files.isLoading && <p className="sr-only" role="status">Loading context…</p>}>
+    {progressSection}
+    {subAgentsSection}
+    {artifacts.length > 0 && <WorkFileSection title="Artifacts" workId={workId} files={artifacts} owner={owner} editable={editable} onOpen={open} />}
+    {/* Attachments stays while it can take an upload, so its heading's + is always reachable. */}
+    {showAttachments && <WorkFileSection title="Attachments" workId={workId} files={attachments} owner={owner} editable={editable} onOpen={open}
+      action={editable && <Button isIconOnly size="sm" variant="ghost" aria-label="Add attachment" isPending={upload.isPending} onPress={() => fileInput.current?.click()}><Plus size={16} /></Button>} />}
+    <AttachmentConflictDialog conflict={conflict} onClose={() => setConflict(null)} onReplace={file => uploadFile(file, true)} />
+    <input ref={fileInput} type="file" hidden aria-label="Upload attachment file" onChange={event => { const file = event.target.files?.[0]; if (file) uploadFile(file); event.target.value = ""; }} />
+    {files.isError && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>Files couldn’t be loaded.</Alert.Description></Alert.Content><Button size="sm" variant="ghost" onPress={() => void files.refetch()}>Retry</Button></Alert>}
+    {hasTokens && <WorkTokenSection totals={trace.data?.totals ?? []} onOpenTimeline={() => reader.open({ kind: "trace", label: title, projectId: "", workId, createdAt: workCreatedAt })} />}
+    {upload.error && !(upload.error instanceof NameTakenError) && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>{upload.error.message}</Alert.Description></Alert.Content></Alert>}
+  </WorkContextRail>;
+}
+
+// The owner shares and changes the Work's files; a Work Share holder downloads them.
+function WorkFileSection({ title, workId, files, owner, editable, onOpen, action }: {
+  title: string; workId: string; files: WorkFile[]; owner: boolean; editable: boolean; onOpen: (file: WorkFile) => void; action?: ReactNode;
+}) {
+  const userId = useCurrentUser().data?.user?.id;
+  const download = useDownloadWorkFile(workId);
+  const share = useCreateWorkFileShareLink(workId);
+  const unshare = useStopWorkFileSharing(workId);
+  const removal = useDeleteWorkFile(workId);
+  const rename = useRenameWorkAttachment(workId);
+  const upload = useUploadWorkAttachment(workId);
+  const byKey = new Map(files.map(file => [workFileKey(file), file]));
+  const file = (row: FileRow) => byKey.get(row.key)!;
+  const rows: FileRow[] = files.map(file => ({
+    key: workFileKey(file), name: file.name, attachment: file.kind === WorkFileKind.ATTACHMENT, sizeBytes: Number(file.sizeBytes), contentType: file.contentType,
+    modifiedAt: file.updatedAt ? timestampDate(file.updatedAt) : null, shared: file.shareLinks.length > 0, ownLink: file.shareLinks.find(link => link.createdByUserId === userId)?.url,
+  }));
+  return <FileSection title={title} rows={rows} onOpen={row => onOpen(file(row))} action={action} actions={{
+    download: row => download.mutateAsync(file(row)),
+    ...(owner && {
+      share: async (row: FileRow) => (await share.mutateAsync(file(row)))?.url,
+      unshare: async (row: FileRow) => { await unshare.mutateAsync(file(row)); return { status: "success" as const, title: "Sharing stopped", description: `Links to ${row.name} no longer open it.` }; },
+    }),
+    ...(editable && {
+      rename: (row: FileRow, newName: string) => rename.mutateAsync({ name: row.name, newName }),
+      replace: (_: FileRow, named: File) => upload.mutateAsync({ file: named, replace: true }),
+      remove: (row: FileRow) => removal.mutateAsync(file(row)),
+    }),
+    removeNote: "The file is removed from this Work right away. Its share links stop working.",
+  }} />;
+}

package/pages/workbench/personal-work-page.tsx

@@ -0,0 +1,100 @@
+import { useWorkComputer } from "../../lib/computer-service";
+import { useCallback, useState } from "react";
+import { Code, ConnectError } from "@connectrpc/connect";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import type { StartupProgress } from "@talgent/workbench-contracts/agent/public/v1/startup_pb";
+import { useParams } from "react-router-dom";
+import { PageLayout } from "../../components/shell/page-layout";
+import { ConversationUnavailable } from "../../components/work/conversation-unavailable";
+import { WorkConversation } from "../../components/work/work-conversation";
+import { WorkSnapshotUnavailable } from "../../components/work/work-snapshot-state";
+import { useCurrentUser } from "../../lib/account-service";
+import { useAgentWork } from "../../lib/agent-work-service";
+import { useLibraryWork, usePersonalWorks } from "../../lib/personal-work-service";
+import { newestStartupProgress } from "../../lib/startup-progress";
+import type { SubAgent } from "../../lib/subagents";
+import { useUploadWorkAttachment } from "../../lib/work-file-service";
+import { adaptWorkProgress } from "../../lib/work-progress";
+import { PersonalWorkContext } from "./personal-work-context";
+import { ShareButton } from "./share-dialog";
+import { TitleButton } from "./title-dialog";
+
+/** A Personal Work: its conversation and context card, titled by the Work.
+ * Its owner continues, renames and shares it; a Work Share holder reads it. */
+export function PersonalWorkPage() {
+  const { workId = "" } = useParams();
+  const userId = useCurrentUser().data?.user?.id ?? "";
+  const snapshot = useAgentWork(workId);
+  const work = snapshot.data?.work;
+  const computer = useWorkComputer(work?.computerId, Boolean(work?.permissionMode));
+  const refused = snapshot.error ? ConnectError.from(snapshot.error).code : undefined;
+  // Agent shows a Work only to its owner; anyone else may still hold a Work Share.
+  const reader = refused === Code.PermissionDenied;
+  const own = usePersonalWorks();
+  const shared = useLibraryWork(workId, reader);
+  // Only a Personal Work has a title of its own and is shared from here; a
+  // Work of a Project is the Project's to share.
+  const personal = own.data?.find(item => item.id === workId);
+  // A Work with a Project keeps its files in the Project's spaces, not here.
+  const personalWork = work ? Boolean(personal) : Boolean(shared.data?.personal);
+  const title = (work ? personal?.title : shared.data?.title) || (reader ? "Shared work" : "Work");
+  const [live, setLive] = useState<{ workId: string; lifecycle: string; startup?: StartupProgress }>({ workId: "", lifecycle: "" });
+  const onLifecycle = useCallback((lifecycle: string, _updatedAt?: Date, startup?: StartupProgress) => setLive({ workId, lifecycle, startup }), [workId]);
+  const [liveSubAgents, setLiveSubAgents] = useState<{ workId: string; agents: SubAgent[] }>();
+  const onSubAgents = useCallback((agents: SubAgent[]) => setLiveSubAgents({ workId, agents }), [workId]);
+  const [withdrawn, setWithdrawn] = useState<string | null>(null);
+  const upload = useUploadWorkAttachment(workId);
+  const liveLifecycle = live.workId === workId ? live.lifecycle : "";
+  const workLifecycle = liveLifecycle || work?.state || "";
+  const startupProgress = newestStartupProgress(live.workId === workId ? live.startup : undefined, work?.startupProgress);
+  const pending = snapshot.isPending || (reader && (shared.isPending || !liveLifecycle));
+  const starting = workLifecycle !== "closed" && (pending || Boolean(startupProgress ? startupProgress.status !== "completed" : ["created", "starting"].includes(workLifecycle)));
+  const refresh = useCallback(() => { void snapshot.refetch(); }, [snapshot]);
+
+  // Refused by Agent and not in the person's Library: no Work Share to read it by.
+  const unavailable = withdrawn === workId ? <ConversationUnavailable withdrawn />
+    : reader && shared.data === null ? <ConversationUnavailable />
+    : refused === Code.NotFound ? <WorkSnapshotUnavailable notFound onRetry={refresh} />
+    : snapshot.isError && !reader ? <WorkSnapshotUnavailable notFound={false} onRetry={refresh} />
+    : null;
+  return <PageLayout workspaceTitle={title} topActions={work && personal && <>
+    <TitleButton workId={workId} title={title} />
+    <ShareButton workId={workId} ownerId={userId} readerIds={work.shareReaderIds} />
+  </>}>
+    <div className="agent-grid">
+      {unavailable ? <section data-testid="agent-stream-panel" className="stream-panel" aria-label="Agent Stream">{unavailable}</section>
+        : (work || (reader && !shared.isPending)) && <WorkConversation
+          key={workId}
+          agentWorkId={workId}
+          label={title}
+          readOnly={reader}
+          onAccessWithdrawn={() => setWithdrawn(workId)}
+          workLifecycle={workLifecycle}
+          stateReason={work?.stateReason}
+          disconnectedSince={work?.disconnectedSince ? timestampDate(work.disconnectedSince) : undefined}
+          resumeOnReconnection={work?.resumeOnReconnection}
+          isWorkLifecyclePending={pending && !liveLifecycle}
+          startupProgress={startupProgress}
+          startupRequest={work?.startupRequest}
+          workModel={work?.model}
+          workModelOption={work?.modelOption}
+          permissionMode={work?.permissionMode}
+          computer={computer}
+          failureReason={work?.diagnosticReason}
+          sandbox={work?.sandbox}
+          allowedActions={work?.allowedActions}
+          deskWaiting={work?.deskWaiting}
+          workVersion={work?.version}
+          workControlPending={Boolean(work?.archivePending || work?.resumePending)}
+          onWorkControlChange={refresh}
+          onWorkLifecycleChange={onLifecycle}
+          onSubAgentsChange={onSubAgents}
+          onUploadAttachment={work && personalWork ? file => upload.mutateAsync({ file }) : undefined}
+        />}
+      {!unavailable && !snapshot.isPending && !starting && <PersonalWorkContext workId={workId} title={title} owner={Boolean(work)} withFiles={personalWork} workLifecycle={workLifecycle}
+        workCreatedAt={work?.createdAt ? timestampDate(work.createdAt) : null} progress={work ? adaptWorkProgress(work.workProgress) : undefined}
+        subAgents={liveSubAgents?.workId === workId ? liveSubAgents.agents : undefined} />}
+      {snapshot.isPending && <span className="sr-only" role="status">Loading work…</span>}
+    </div>
+  </PageLayout>;
+}

package/pages/workbench/personal-works-page.tsx

@@ -0,0 +1,36 @@
+import { Alert, Button, Table, buttonVariants } from "@heroui/react";
+import { Plus } from "lucide-react";
+import { Link, useNavigate } from "react-router-dom";
+import { formatAgo } from "../../components/analytics/work-usage/work-status";
+import { PageLayout } from "../../components/shell/page-layout";
+import { useEntryShell } from "../../components/shell/entry-shell";
+import { usePersonalWorks } from "../../lib/personal-work-service";
+import { useNow } from "../../lib/use-now";
+import { workPresentation } from "../../lib/work-state-presentation";
+
+/** The person's Personal Works, most recently updated first, for an entry
+ * that lists them on a page of their own. */
+export function PersonalWorksPage() {
+  const { personal } = useEntryShell();
+  const works = usePersonalWorks();
+  const navigate = useNavigate();
+  const now = useNow();
+  return <PageLayout workspaceTitle="Personal works" topActions={<Link to={personal.newWork} className={buttonVariants({ size: "sm" })}><Plus size={16} aria-hidden="true" />New work</Link>}>
+    <div className="mx-auto flex w-full max-w-[960px] flex-col gap-6 pb-24 pt-4">
+      {works.isError && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>Your works couldn’t be loaded.</Alert.Description></Alert.Content><Button size="sm" variant="secondary" onPress={() => void works.refetch()}>Retry</Button></Alert>}
+      <Table><Table.ScrollContainer><Table.Content aria-label="Personal works" className="w-full" onRowAction={key => navigate(personal.work(String(key)))}>
+        <Table.Header><Table.Column isRowHeader>Work</Table.Column><Table.Column className="w-56">State</Table.Column><Table.Column className="w-28">Updated</Table.Column></Table.Header>
+        <Table.Body renderEmptyState={() => <div className="py-8 text-center text-sm text-muted">{works.isPending ? <span role="status">Loading your works…</span> : works.isError ? null : "Works you start for yourself show up here."}</div>}>
+          {(works.data ?? []).map(work => {
+            const state = workPresentation(work);
+            return <Table.Row key={work.id} id={work.id}>
+              <Table.Cell><Link className="hover:underline" to={personal.work(work.id)}>{work.title}</Link></Table.Cell>
+              <Table.Cell>{state ? <span className="flex items-center gap-1.5 whitespace-nowrap text-sm"><state.icon size={14} aria-hidden="true" />{state.label}{state.description && <span className="sr-only">. {state.description}</span>}</span> : <span className="text-muted">—</span>}</Table.Cell>
+              <Table.Cell>{work.updatedAt ? formatAgo(now - work.updatedAt.getTime()) : "—"}</Table.Cell>
+            </Table.Row>;
+          })}
+        </Table.Body>
+      </Table.Content></Table.ScrollContainer></Table>
+    </div>
+  </PageLayout>;
+}

package/pages/workbench/share-dialog.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { Alert, Button, ListBox, Modal, SearchField, Spinner } from "@heroui/react";
+import { Share2 } from "lucide-react";
+import { useDirectoryUsers, useGrantPersonalWorkShare, useRevokeWorkShare, useShareCandidates } from "../../lib/personal-work-service";
+import { personName } from "../../lib/user-display";
+import { Person } from "./person";
+
+/** Share: the people a Personal Work's owner lets read it. Anyone in the
+ * User Directory may be added; the Work stays private to the rest. */
+export function ShareButton({ workId, ownerId, readerIds }: { workId: string; ownerId: string; readerIds: string[] }) {
+  const [open, setOpen] = useState(false);
+  return <Modal isOpen={open} onOpenChange={setOpen}>
+    <Button size="sm" variant="secondary"><Share2 size={15} aria-hidden="true" />Share</Button>
+    <Modal.Backdrop><Modal.Container placement="center" size="md"><Modal.Dialog>
+      <Modal.CloseTrigger />
+      <Modal.Header><Modal.Heading>Share this work</Modal.Heading></Modal.Header>
+      <Modal.Body className="grid gap-4"><ShareReaders workId={workId} ownerId={ownerId} readerIds={readerIds} /></Modal.Body>
+    </Modal.Dialog></Modal.Container></Modal.Backdrop>
+  </Modal>;
+}
+
+function ShareReaders({ workId, ownerId, readerIds }: { workId: string; ownerId: string; readerIds: string[] }) {
+  const [query, setQuery] = useState("");
+  const candidates = useShareCandidates(query);
+  const readers = useDirectoryUsers(readerIds);
+  const grant = useGrantPersonalWorkShare(workId);
+  const revoke = useRevokeWorkShare(workId);
+  const offered = (candidates.data ?? []).filter(user => user.userId !== ownerId && !readerIds.includes(user.userId));
+  const error = grant.error ?? revoke.error;
+  return <>
+    <p className="text-sm text-muted">People you add can read the conversation and its files. They can’t send instructions.</p>
+    <SearchField aria-label="Find people" value={query} onChange={setQuery} autoFocus>
+      <SearchField.Group><SearchField.SearchIcon /><SearchField.Input placeholder="Find people by username" /><SearchField.ClearButton aria-label="Clear search" /></SearchField.Group>
+    </SearchField>
+    {query.trim() && <div aria-live="polite">
+      {candidates.isPending ? <span className="flex items-center gap-2 text-sm text-muted"><Spinner size="sm" />Searching…</span>
+        : candidates.isError ? <span className="text-sm text-danger" role="alert">People couldn’t be found. <Button size="sm" variant="ghost" onPress={() => void candidates.refetch()}>Retry</Button></span>
+        : offered.length === 0 ? <span className="text-sm text-muted">No one else matches “{query.trim()}”.</span>
+        : <ListBox aria-label="People to add" selectionMode="none" onAction={key => { const user = offered.find(item => item.userId === key); if (user) grant.mutate(user, { onSuccess: () => setQuery("") }); }}>
+          {offered.map(user => <ListBox.Item key={user.userId} id={user.userId} textValue={personName(user)}><Person user={user} /><span className="ms-auto text-xs text-muted">Add</span></ListBox.Item>)}
+        </ListBox>}
+    </div>}
+    {error && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>{error.message}</Alert.Description></Alert.Content></Alert>}
+    <section aria-label="People with access" className="grid gap-2">
+      <h3 className="text-sm font-medium">People with access</h3>
+      {readerIds.length === 0 ? <p className="text-sm text-muted">Only you can read this work.</p>
+        : <ul className="grid gap-1">{readerIds.map(id => {
+          const user = readers.data?.get(id);
+          return <li key={id} className="flex items-center gap-2">
+            {user ? <Person user={user} /> : <span className="text-sm text-muted">{readers.isPending ? "Loading…" : "Someone no longer in the directory"}</span>}
+            <Button size="sm" variant="ghost" className="ms-auto" isPending={revoke.isPending && revoke.variables === id} onPress={() => revoke.mutate(id)} aria-label={`Remove ${user ? personName(user) : "this person"}`}>Remove</Button>
+          </li>;
+        })}</ul>}
+    </section>
+    {grant.isPending && <p className="sr-only" role="status">Sharing…</p>}
+  </>;
+}

package/pages/workbench/title-dialog.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { Alert, Button, Input, Label, Modal, TextField, Tooltip } from "@heroui/react";
+import { Pencil } from "lucide-react";
+import { useChangePersonalWorkTitle } from "../../lib/personal-work-service";
+
+/** Renames a Personal Work: its display title starts from its first input
+ * and is the owner's to change. */
+export function TitleButton({ workId, title }: { workId: string; title: string }) {
+  const [open, setOpen] = useState(false);
+  return <>
+    <Tooltip><Button size="sm" variant="ghost" isIconOnly aria-label="Rename work" onPress={() => setOpen(true)}><Pencil size={15} aria-hidden="true" /></Button><Tooltip.Content>Rename work</Tooltip.Content></Tooltip>
+    {open && <TitleDialog workId={workId} title={title} onClose={() => setOpen(false)} />}
+  </>;
+}
+
+function TitleDialog({ workId, title, onClose }: { workId: string; title: string; onClose: () => void }) {
+  const [value, setValue] = useState(title);
+  const change = useChangePersonalWorkTitle(workId);
+  const trimmed = value.trim();
+  const submit = () => {
+    if (!trimmed || trimmed === title || change.isPending) return;
+    change.mutate(trimmed, { onSuccess: onClose });
+  };
+  return <Modal><Modal.Backdrop isOpen onOpenChange={open => { if (!open && !change.isPending) onClose(); }} isDismissable={!change.isPending}><Modal.Container placement="center" size="sm"><Modal.Dialog>
+    <Modal.Header><Modal.Heading>Rename work</Modal.Heading></Modal.Header>
+    <Modal.Body>
+      <TextField value={value} onChange={setValue} isInvalid={change.isError} autoFocus>
+        <Label>Title</Label>
+        <Input onKeyDown={event => { if (event.key === "Enter") submit(); }} />
+      </TextField>
+      {change.error && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>{change.error.message}</Alert.Description></Alert.Content></Alert>}
+    </Modal.Body>
+    <Modal.Footer><Button variant="secondary" isDisabled={change.isPending} onPress={onClose}>Cancel</Button><Button isPending={change.isPending} isDisabled={!trimmed || trimmed === title} onPress={submit}>Rename</Button></Modal.Footer>
+  </Modal.Dialog></Modal.Container></Modal.Backdrop></Modal>;
+}

package/pages/workbench/usage-page.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useMemo, useState } from "react";
+import { Alert, Button, Tabs } from "@heroui/react";
+import { FileText, FolderKanban } from "lucide-react";
+import { useSearchParams } from "react-router-dom";
+import { TokenReport, type TokenRanking } from "../../components/analytics/token-report";
+import { PageLayout } from "../../components/shell/page-layout";
+import { dashboardReportPeriod } from "../../lib/dashboard-report";
+import { usePersonalTokenAnalytics } from "../../lib/personal-usage-service";
+import { untitledWorkLabel, usePersonalWorks } from "../../lib/personal-work-service";
+import { dashboardWindows, parseDashboardWindow } from "../../lib/dashboard";
+import type { TokenAnalytics } from "../../lib/token-analytics";
+import { tokenTotals } from "../../lib/trace-view-model";
+
+const topWorkCount = 10;
+
+/** Usage: the person's usage across all their Works, laid out as Insights'
+ * Spend, its one ranking being Top works. */
+export function UsagePage() {
+  const [search, setSearch] = useSearchParams();
+  const range = parseDashboardWindow(search.get("window"));
+  // The window moves with the clock, as Insights' does.
+  const [anchor, setAnchor] = useState(() => new Date());
+  useEffect(() => { const timer = window.setInterval(() => setAnchor(new Date()), 30_000); return () => window.clearInterval(timer); }, []);
+  const period = useMemo(() => dashboardReportPeriod(range, anchor), [range, anchor]);
+  const usage = usePersonalTokenAnalytics(range, period);
+  const [hover, setHover] = useState<{ index: number; chart: string } | null>(null);
+  const windowTabs = <Tabs selectedKey={range} onSelectionChange={key => { setHover(null); setSearch({ window: String(key) }, { replace: true }); }}>
+    <Tabs.ListContainer><Tabs.List aria-label="Time window">{dashboardWindows.map(item => <Tabs.Tab key={item} id={item} aria-controls="usage-report">{item.toUpperCase()}<Tabs.Indicator /></Tabs.Tab>)}</Tabs.List></Tabs.ListContainer>
+  </Tabs>;
+  return <PageLayout workspaceTitle="Usage" topActions={windowTabs}>
+    <div id="usage-report" className="flex flex-col gap-4 pb-24">
+      {usage.isError && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>Your usage couldn’t be loaded.</Alert.Description></Alert.Content><Button size="sm" variant="secondary" isPending={usage.isFetching} onPress={() => void usage.refetch()}>Retry</Button></Alert>}
+      {usage.data ? <UsageReport analytics={usage.data} hover={hover} onHover={setHover} /> : !usage.isError && <span className="sr-only" role="status">Loading Usage</span>}
+    </div>
+  </PageLayout>;
+}
+
+function UsageReport({ analytics, hover, onHover }: { analytics: TokenAnalytics; hover: { index: number; chart: string } | null; onHover: (hover: { index: number; chart: string } | null) => void }) {
+  const personal = usePersonalWorks();
+  const rankings: TokenRanking[] = [{ title: "Top works", rows: topWorks(analytics, new Map((personal.data ?? []).map(work => [work.id, work.title]))) }];
+  return <TokenReport analytics={analytics} rankings={rankings} hover={hover} onHover={onHover} />;
+}
+
+// A person's usage splits by Work; a Work of a Project shows as one.
+function topWorks(analytics: TokenAnalytics, titles: Map<string, string>): TokenRanking["rows"] {
+  const projectWorks = new Set(analytics.metrics.buckets.filter(bucket => bucket.projectId).map(bucket => bucket.agentWorkId ?? ""));
+  return [...tokenTotals(analytics.metrics.buckets, "work")].sort((left, right) => right[1] - left[1]).slice(0, topWorkCount).map(([workId, totalTokens]) => {
+    const project = projectWorks.has(workId) && !titles.has(workId);
+    return { key: workId, totalTokens, label: titles.get(workId) ?? untitledWorkLabel, detail: workId,
+      icon: project ? <FolderKanban size={16} aria-hidden="true" /> : <FileText size={16} aria-hidden="true" /> };
+  });
+}

package/public/assets/product-icons/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 LobeHub
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/public/assets/product-icons/README.md

@@ -0,0 +1,13 @@
+# Product icons
+
+Shared by the prototype and production UI. Render with the existing
+`wpb-product-icon` image styles, including the dark-theme inversion.
+
+OpenAI, Anthropic, Notion and Linear are the existing product assets moved from
+`assets/prototype/product-icons`.
+
+DeepSeek, GLM, Kimi, Qwen and MiniMax are vendored from
+`@lobehub/icons-static-svg@1.95.1` ([Lobe Icons](https://github.com/lobehub/lobe-icons)).
+`glm.svg` is the upstream `chatglm.svg`; the other filenames are unchanged. The
+upstream MIT license for these assets is included in `LICENSE`. Product marks belong to their
+respective owners.

package/public/assets/product-icons/anthropic.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Anthropic</title><path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"/></svg>

package/public/assets/product-icons/deepseek.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>DeepSeek</title><path d="M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z"></path></svg>

package/public/assets/product-icons/glm.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ChatGLM</title><path d="M9.917 2c4.906 0 10.178 3.947 8.93 10.58-.014.07-.037.14-.057.21l-.003-.277c-.083-3-1.534-8.934-8.87-8.934-3.393 0-8.137 3.054-7.93 8.158-.04 4.778 3.555 8.4 7.95 8.332l.073-.001c1.2-.033 2.763-.429 3.1-1.657.063-.031.26.534.268.598.048.256.112.369.192.34.981-.348 2.286-1.222 1.952-2.38-.176-.61-1.775-.147-1.921-.347.418-.979 2.234-.926 3.153-.716.443.102.657.38 1.012.442.29.052.981-.2.96.242C17.226 19.632 13.833 22 9.918 22 3.654 22 0 16.574 0 11.737 0 5.947 4.959 2 9.917 2zM9.9 5.3c.484 0 1.125.225 1.38.585 3.669.145 4.313 2.686 4.694 5.444.255 1.838.315 2.3.182 1.387l.083.59c.068.448.554.737.982.516.144-.075.254-.231.328-.47a.2.2 0 01.258-.13l.625.22a.2.2 0 01.124.238 2.172 2.172 0 01-.51.92c-.878.917-2.757.664-3.08-.62-.14-.554-.055-.626-.345-1.242-.292-.621-1.238-.709-1.69-.295-.345.315-.407.805-.406 1.282L12.6 15.9a.9.9 0 01-.9.9h-1.4a.9.9 0 01-.9-.9v-.65a1.15 1.15 0 10-2.3 0v.65a.9.9 0 01-.9.9H4.8a.9.9 0 01-.9-.9l.035-3.239c.012-1.884.356-3.658 2.47-4.134.2-.045.252.13.29.342.025.154.043.252.053.294.701 3.058 1.75 4.299 3.144 3.722l.66-.331.254-.13c.158-.082.25-.131.276-.15.012-.01-.165-.206-.407-.464l-1.012-1.067a8.925 8.925 0 01-.199-.216c-.047-.034-.116.068-.208.306-.074.157-.251.252-.272.326-.013.058.108.298.362.72.164.288.22.508-.31.343-1.04-.8-1.518-2.273-1.684-3.725-.004-.035-.162-1.913-.162-1.913a1.2 1.2 0 011.113-1.281L9.9 5.3zm12.994 8.68c.037.697-.403.704-1.213.591l-1.783-.276c-.265-.053-.385-.099-.313-.147.47-.315 3.268-.93 3.31-.168zm-.915-.083l-.926.042c-.85.077-1.452.24.338.336l.103.003c.815.012 1.264-.359.485-.381zm1.667-3.601h.01c.79.398.067 1.03-.65 1.393-.14.07-.491.176-1.052.315-.241.04-.457.092-.333.16l.01.005c1.952.958-3.123 1.534-2.495 1.285l.38-.148c.68-.266 1.614-.682 1.666-1.337.038-.48 1.253-.442 1.493-.968.048-.106 0-.236-.144-.389-.05-.047-.094-.094-.107-.148-.073-.305.7-.431 1.222-.168zm-2.568-.474c-.135 1.198-2.479 4.192-1.949 2.863l.017-.042c.298-.717.376-2.221 1.337-3.221.25-.26.636.035.595.4zm-7.976-.253c.02-.694 1.002-.968 1.346-.347.01-1.274-1.941-.768-1.346.347z"></path></svg>

package/public/assets/product-icons/kimi.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Kimi</title><path d="M21.846 0a1.923 1.923 0 110 3.846H20.15a.226.226 0 01-.227-.226V1.923C19.923.861 20.784 0 21.846 0z"></path><path d="M11.065 11.199l7.257-7.2c.137-.136.06-.41-.116-.41H14.3a.164.164 0 00-.117.051l-7.82 7.756c-.122.12-.302.013-.302-.179V3.82c0-.127-.083-.23-.185-.23H3.186c-.103 0-.186.103-.186.23V19.77c0 .128.083.23.186.23h2.69c.103 0 .186-.102.186-.23v-3.25c0-.069.025-.135.069-.178l2.424-2.406a.158.158 0 01.205-.023l6.484 4.772a7.677 7.677 0 003.453 1.283c.108.012.2-.095.2-.23v-3.06c0-.117-.07-.212-.164-.227a5.028 5.028 0 01-2.027-.807l-5.613-4.064c-.117-.078-.132-.279-.028-.381z"></path></svg>

package/public/assets/product-icons/linear.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Linear</title><path d="M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z"/></svg>

package/public/assets/product-icons/minimax.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Minimax</title><path d="M16.278 2c1.156 0 2.093.927 2.093 2.07v12.501a.74.74 0 00.744.709.74.74 0 00.743-.709V9.099a2.06 2.06 0 012.071-2.049A2.06 2.06 0 0124 9.1v6.561a.649.649 0 01-.652.645.649.649 0 01-.653-.645V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v7.472a2.037 2.037 0 01-2.048 2.026 2.037 2.037 0 01-2.048-2.026v-12.5a.785.785 0 00-.788-.753.785.785 0 00-.789.752l-.001 15.904A2.037 2.037 0 0113.441 22a2.037 2.037 0 01-2.048-2.026V18.04c0-.356.292-.645.652-.645.36 0 .652.289.652.645v1.934c0 .263.142.506.372.638.23.131.514.131.744 0a.734.734 0 00.372-.638V4.07c0-1.143.937-2.07 2.093-2.07zm-5.674 0c1.156 0 2.093.927 2.093 2.07v11.523a.648.648 0 01-.652.645.648.648 0 01-.652-.645V4.07a.785.785 0 00-.789-.78.785.785 0 00-.789.78v14.013a2.06 2.06 0 01-2.07 2.048 2.06 2.06 0 01-2.071-2.048V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v3.8a2.06 2.06 0 01-2.071 2.049A2.06 2.06 0 010 12.9v-1.378c0-.357.292-.646.652-.646.36 0 .653.29.653.646V12.9c0 .418.343.757.766.757s.766-.339.766-.757V9.099a2.06 2.06 0 012.07-2.048 2.06 2.06 0 012.071 2.048v8.984c0 .419.343.758.767.758.423 0 .766-.339.766-.758V4.07c0-1.143.937-2.07 2.093-2.07z"></path></svg>

package/public/assets/product-icons/notion.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Notion</title><path d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z"/></svg>