@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/skins/claude.tsx

@@ -0,0 +1,380 @@
+"use client";
+
+import {
+  ActionBarPrimitive,
+  AuiIf,
+  AttachmentPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+  useAuiState,
+} from "@assistant-ui/react";
+import {
+  ArrowUpIcon,
+  AudioLines,
+  Calendar as CalendarIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ClipboardIcon,
+  Code as CodeIcon,
+  Download,
+  FolderOpen,
+  GraduationCap,
+  MoreHorizontal,
+  PencilIcon,
+  PenLine,
+  PlusIcon,
+  RefreshCwIcon,
+  Sparkle,
+  ThumbsDown,
+  ThumbsUp,
+  XIcon,
+} from "lucide-react";
+import { useState, type FC } from "react";
+import { useAttachmentSrc } from "../stock/use-attachment-src";
+import { MarkdownText } from "../stock/markdown-text";
+import { MessageExportMenu } from "../stock/message-export-menu";
+import { SkinCredit, useComposerCopy } from "../stock";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+
+
+const messageActionButtonClassName =
+  "flex size-8 items-center justify-center rounded-md text-[#5b5950] transition-colors hover:bg-[#1a1a18]/5 hover:text-[#1a1a18] dark:text-[#a3a098] dark:hover:bg-white/5 dark:hover:text-[#eee]";
+
+export const Claude: FC = () => {
+  return (
+    <ThreadPrimitive.Root data-export-thread="" className="flex h-full flex-col items-stretch bg-[#F0ECE0] font-serif text-[#1a1a18] dark:bg-[#2b2a27] dark:text-[#eee]">
+        <AuiIf condition={(s) => s.thread.isEmpty}>
+          <EmptyState />
+        </AuiIf>
+
+        <AuiIf condition={(s) => !s.thread.isEmpty}>
+          <ThreadPrimitive.Viewport className="flex grow flex-col overflow-y-auto px-4 pt-12">
+            <ThreadPrimitive.Messages>
+              {() => <ChatMessage />}
+            </ThreadPrimitive.Messages>
+
+            <ThreadPrimitive.ViewportFooter className="sticky bottom-0 mx-auto mt-auto w-full max-w-3xl bg-linear-to-b from-transparent via-[#F0ECE0]/85 to-[#F0ECE0] pt-4 pb-1 dark:via-[#2b2a27]/85 dark:to-[#2b2a27]">
+              <Composer />
+              <SkinCredit />
+            </ThreadPrimitive.ViewportFooter>
+          </ThreadPrimitive.Viewport>
+        </AuiIf>
+      </ThreadPrimitive.Root>
+  );
+};
+
+const EmptyState: FC = () => {
+  const { welcome } = useComposerCopy(
+    "How can I help you today?",
+    "How can I help you today?",
+  );
+  return (
+    <div className="relative flex grow flex-col items-center justify-center px-4">
+      <div className="mx-auto flex w-full max-w-2xl flex-col items-stretch gap-5">
+        <h1 className="flex items-center justify-center gap-3 font-serif text-3xl text-[#1a1a18] sm:text-4xl dark:text-[#eee]">
+          <Sparkle className="size-7 fill-[#c96442] text-[#c96442]" />
+          <span>{welcome}</span>
+        </h1>
+        <Composer />
+        <ModeTabs />
+      </div>
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 px-4 pb-2">
+        <SkinCredit />
+      </div>
+    </div>
+  );
+};
+
+const Composer: FC = () => {
+  const { placeholder } = useComposerCopy(
+    "How can I help you today?",
+    "How can I help you today?",
+  );
+  return (
+    <ComposerPrimitive.Root data-export-chrome="" className="flex w-full flex-col gap-2 rounded-2xl border border-[#E5E0D6] bg-white px-3.5 pt-3 pb-2.5 dark:border-[#3d3a35] dark:bg-[#1f1e1b]">
+      <ComposerPrimitive.Input
+        placeholder={placeholder}
+        rows={1}
+        className="block max-h-72 min-h-6 w-full resize-none bg-transparent text-[#1a1a18] outline-none placeholder:text-[#9a9893] dark:text-[#eee] dark:placeholder:text-[#9a9893]"
+      />
+
+      <div className="flex w-full items-center gap-2">
+        <ComposerPrimitive.AddAttachment
+          aria-label="Add attachment"
+          className="flex size-8 shrink-0 items-center justify-center rounded-md text-[#5b5950] transition-colors hover:bg-[#1a1a18]/5 hover:text-[#1a1a18] dark:text-[#a3a098] dark:hover:bg-white/5 dark:hover:text-[#eee]"
+        >
+          <PlusIcon width={16} height={16} />
+        </ComposerPrimitive.AddAttachment>
+
+        <div className="ml-auto flex items-center gap-1">
+          <ClaudeModelPicker />
+          <ComposerPrimaryAction />
+        </div>
+      </div>
+
+      <AuiIf condition={(s) => s.composer.attachments.length > 0}>
+        <div className="-mx-1 -mb-1 flex flex-row gap-2 overflow-x-auto pt-1">
+          <ComposerPrimitive.Attachments>
+            {() => <ClaudeAttachment />}
+          </ComposerPrimitive.Attachments>
+        </div>
+      </AuiIf>
+    </ComposerPrimitive.Root>
+  );
+};
+
+const ComposerPrimaryAction: FC = () => {
+  return (
+    <>
+      <AuiIf condition={(s) => s.thread.isRunning}>
+        <ComposerPrimitive.Cancel className="flex size-8 items-center justify-center rounded-md bg-[#c96442] text-white transition-colors hover:bg-[#b1573a]">
+          <div className="size-2.5 rounded-[2px] bg-current" />
+        </ComposerPrimitive.Cancel>
+      </AuiIf>
+
+      <AuiIf
+        condition={(s) => !s.thread.isRunning && s.composer.dictation != null}
+      >
+        <ComposerPrimitive.StopDictation
+          className="flex size-8 items-center justify-center rounded-md bg-[#c96442] text-white transition-colors hover:bg-[#b1573a]"
+          aria-label="Stop dictation"
+        >
+          <div className="size-2.5 animate-pulse rounded-[2px] bg-current" />
+        </ComposerPrimitive.StopDictation>
+      </AuiIf>
+
+      <AuiIf
+        condition={(s) =>
+          !s.thread.isRunning &&
+          s.composer.dictation == null &&
+          !s.composer.isEmpty
+        }
+      >
+        <ComposerPrimitive.Send className="flex size-8 items-center justify-center rounded-md bg-[#c96442] text-white transition-colors hover:bg-[#b1573a] disabled:pointer-events-none disabled:opacity-50">
+          <ArrowUpIcon width={16} height={16} />
+        </ComposerPrimitive.Send>
+      </AuiIf>
+
+      <AuiIf
+        condition={(s) =>
+          !s.thread.isRunning &&
+          s.composer.dictation == null &&
+          s.composer.isEmpty
+        }
+      >
+        <ComposerPrimitive.Dictate
+          className="flex size-8 items-center justify-center rounded-md text-[#5b5950] transition-colors hover:bg-[#1a1a18]/5 hover:text-[#1a1a18] dark:text-[#a3a098] dark:hover:bg-white/5 dark:hover:text-[#eee]"
+          aria-label="Use voice mode"
+        >
+          <AudioLines className="size-4" />
+        </ComposerPrimitive.Dictate>
+      </AuiIf>
+    </>
+  );
+};
+
+const CLAUDE_MODELS = [
+  {
+    id: "sonnet-4.5",
+    name: "Sonnet 4.5",
+    description: "Smart, fast, everyday tasks",
+  },
+  {
+    id: "opus-4.7",
+    name: "Opus 4.7",
+    description: "Anthropic's most capable model",
+  },
+  {
+    id: "haiku-4.5",
+    name: "Haiku 4.5",
+    description: "Fastest, most affordable",
+  },
+];
+
+const ClaudeModelPicker: FC = () => {
+  const [model, setModel] = useState(CLAUDE_MODELS[0]!.id);
+
+  return (
+    <div data-deploy-model-picker className="contents">
+    <DropdownMenu>
+      <DropdownMenuTrigger className="flex h-8 items-center gap-1 rounded-md px-2.5 text-sm whitespace-nowrap text-[#1a1a18] transition hover:bg-[#1a1a18]/5 dark:text-[#eee] dark:hover:bg-white/5">
+        <span className="font-serif">
+          {CLAUDE_MODELS.find((m) => m.id === model)?.name}
+        </span>
+        <ChevronDownIcon width={16} height={16} className="opacity-60" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-64">
+        {CLAUDE_MODELS.map((m) => (
+          <DropdownMenuItem
+            key={m.id}
+            onClick={() => setModel(m.id)}
+            className="flex items-start gap-3"
+          >
+            <span className="mt-0.5 flex size-4 items-center justify-center text-[#c96442]">
+              {m.id === model ? <CheckIcon /> : null}
+            </span>
+            <span className="flex flex-1 flex-col">
+              <span className="text-foreground font-serif text-sm">
+                {m.name}
+              </span>
+              <span className="text-muted-foreground text-xs">
+                {m.description}
+              </span>
+            </span>
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="text-muted-foreground text-sm">
+          More options
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+    </div>
+  );
+};
+
+const ModeTabs: FC = () => {
+  const tabs = [
+    { label: "Write", Icon: PenLine },
+    { label: "Learn", Icon: GraduationCap },
+    { label: "Code", Icon: CodeIcon },
+    { label: "From Drive", Icon: FolderOpen },
+    { label: "From Calendar", Icon: CalendarIcon },
+  ];
+
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-2">
+      {tabs.map(({ label, Icon }) => (
+        <button
+          key={label}
+          type="button"
+          aria-hidden="true"
+          tabIndex={-1}
+          className="flex h-8 items-center gap-1.5 rounded-lg border border-[#E5E0D6] bg-transparent px-3 text-sm whitespace-nowrap text-[#3d3a35] transition-colors hover:bg-white/60 dark:border-[#3d3a35] dark:text-[#cdc9be] dark:hover:bg-[#1f1e1b]/60"
+        >
+          <Icon className="size-3.5 text-[#8a8780] dark:text-[#a3a098]" />
+          <span className="font-serif">{label}</span>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+const ChatMessage: FC = () => {
+  const role = useAuiState((s) => s.message.role);
+  return (
+    <MessagePrimitive.Root data-role={role} className="group/message relative mx-auto flex w-full max-w-3xl flex-col py-2">
+      <AuiIf condition={(s) => s.message.role === "user"}>
+        <div className="flex flex-col items-end gap-1">
+          <div className="max-w-[80%] rounded-2xl bg-[#E5E0D6] px-4 py-2.5 wrap-break-word whitespace-pre-wrap text-[#1a1a18] dark:bg-[#393937] dark:text-[#eee]">
+            <MessagePrimitive.Parts>
+              {({ part }) => {
+                if (part.type === "text") return <MarkdownText />;
+                return null;
+              }}
+            </MessagePrimitive.Parts>
+          </div>
+          <ActionBarPrimitive.Root data-export-chrome="" className="-mt-px flex items-center gap-0.5 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100">
+            <ActionBarPrimitive.Edit className={messageActionButtonClassName}>
+              <PencilIcon width={16} height={16} />
+            </ActionBarPrimitive.Edit>
+            <ActionBarPrimitive.Copy className={messageActionButtonClassName}>
+              <AuiIf condition={(s) => s.message.isCopied}>
+                <CheckIcon />
+              </AuiIf>
+              <AuiIf condition={(s) => !s.message.isCopied}>
+                <ClipboardIcon width={16} height={16} />
+              </AuiIf>
+            </ActionBarPrimitive.Copy>
+          </ActionBarPrimitive.Root>
+        </div>
+      </AuiIf>
+
+      <AuiIf condition={(s) => s.message.role === "assistant"}>
+        <div className="flex flex-col">
+          <div className="prose prose-claude font-serif leading-[1.65rem] wrap-break-word text-[#1a1a18] dark:text-[#eee]">
+            <MessagePrimitive.Parts>
+              {({ part }) => {
+                if (part.type === "text") return <MarkdownText />;
+                return null;
+              }}
+            </MessagePrimitive.Parts>
+          </div>
+          <ActionBarPrimitive.Root data-export-chrome="" className="mt-2 flex items-center gap-0.5 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100">
+            <ActionBarPrimitive.Copy className={messageActionButtonClassName}>
+              <AuiIf condition={(s) => s.message.isCopied}>
+                <CheckIcon />
+              </AuiIf>
+              <AuiIf condition={(s) => !s.message.isCopied}>
+                <ClipboardIcon width={16} height={16} />
+              </AuiIf>
+            </ActionBarPrimitive.Copy>
+            <ActionBarPrimitive.FeedbackPositive
+              className={messageActionButtonClassName}
+            >
+              <ThumbsUp className="size-4" />
+            </ActionBarPrimitive.FeedbackPositive>
+            <ActionBarPrimitive.FeedbackNegative
+              className={messageActionButtonClassName}
+            >
+              <ThumbsDown className="size-4" />
+            </ActionBarPrimitive.FeedbackNegative>
+            <ActionBarPrimitive.Reload className={messageActionButtonClassName}>
+              <RefreshCwIcon width={16} height={16} />
+            </ActionBarPrimitive.Reload>
+            <MessageExportMenu
+              trigger={
+                <button type="button" aria-label="More" className={messageActionButtonClassName}>
+                  <MoreHorizontal width={16} height={16} />
+                </button>
+              }
+              icon={<Download className="size-4" />}
+              align="start"
+              contentClassName="bg-popover text-popover-foreground data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out z-50 min-w-40 overflow-hidden rounded-xl border p-1.5 shadow-md"
+              itemClassName="text-muted-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-sm outline-none select-none"
+            />
+          </ActionBarPrimitive.Root>
+        </div>
+      </AuiIf>
+    </MessagePrimitive.Root>
+  );
+};
+
+const ClaudeAttachment: FC = () => {
+  const isImage = useAuiState((s) => s.attachment.type === "image");
+  const src = useAttachmentSrc();
+
+  return (
+    <AttachmentPrimitive.Root className="group/thumbnail relative">
+      <div
+        className="overflow-hidden rounded-lg border border-[#E5E0D6] dark:border-[#3d3a35]"
+        style={{ width: "80px", height: "80px" }}
+      >
+        {isImage && src ? (
+          <img
+            className="h-full w-full object-cover"
+            alt="Attachment"
+            src={src}
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-white text-[#5b5950] dark:bg-[#2b2a27] dark:text-[#a3a098]">
+            <AttachmentPrimitive.unstable_Thumb className="text-xs" />
+          </div>
+        )}
+      </div>
+      <AttachmentPrimitive.Remove
+        className="absolute -top-1.5 -right-1.5 flex size-5 items-center justify-center rounded-full bg-[#1a1a18] text-white opacity-0 transition-opacity group-focus-within/thumbnail:opacity-100 group-hover/thumbnail:opacity-100 hover:bg-[#3d3a35] dark:bg-white dark:text-[#1a1a18] dark:hover:bg-[#cdc9be]"
+        aria-label="Remove attachment"
+      >
+        <XIcon width={12} height={12} />
+      </AttachmentPrimitive.Remove>
+    </AttachmentPrimitive.Root>
+  );
+};

package/src/components/chat/skins/digichat-composer-toolbar.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { Fragment, type ReactNode } from "react";
+import type { EmbedChatPrefsApi } from "../stock/embed-chat-prefs";
+import { connectedToolIsOn, countToolSurface } from "../stock/tool-surface";
+import { DigichatContextMeter } from "./digichat-context-meter";
+import { DigichatUsageMeter } from "./digichat-usage-meter";
+
+/**
+ * Plain-text composer footer for the digichat skin. Shows the selected
+ * model and the active backend on the left and the context fill on the
+ * right. Clicking the model opens the full settings menu — that is the only
+ * control here; the settings button and the per-control chips are gone.
+ *
+ * The backend chip is a backend indicator, so it appears only where BYOK is
+ * on the table (`showByok`) and the host named the backend that serves the
+ * chat (`providerLabel`). The label is the host's: this package holds no
+ * provider vocabulary, and a host that cannot name the backend shows no
+ * chip rather than a wrong one.
+ */
+export function DigichatComposerToolbar({ prefs }: { prefs: EmbedChatPrefsApi }) {
+  const sessionModel = prefs.prefs.model.trim();
+  // The chip names the session model. The bar sizes to the model the turn
+  // sends (`meterModel`), including a bring-your-own-key binding.
+  const modelLabel = sessionModel || "auto";
+  const meterModel = prefs.meterModel?.trim() || sessionModel;
+  const providerLabel = prefs.providerLabel?.trim() ?? "";
+  // The backend is named whenever the host named one — a Foundry tenant is
+  // served by Azure AI Foundry, not by the house model provider. It is a
+  // button only where the tenant can switch it.
+  const showProvider = providerLabel.length > 0;
+
+  // Connected MCP servers and the tools inside them: one ticket server with
+  // five tools reads "1 MCP / 5 tools", not "5 MCPs". The rows come from the
+  // same expansion `/tools` renders (`../stock/tool-surface`), so the count
+  // and the list behind it cannot disagree. Per-tool toggles live in
+  // prefs.extra (tool id -> off); a row follows its own switch.
+  const toolSwitch = {
+    digisearch: prefs.hasDigisearch,
+    vault: prefs.hasVault,
+    webSearch: prefs.tenantAllowsWeb,
+    extraToolOn: prefs.extraToolOn,
+  };
+  const mcpCounts = countToolSurface(prefs.mcpServers, {
+    isOn: (id) => connectedToolIsOn(id, toolSwitch),
+    isToolOn: prefs.extraToolOn,
+  });
+  const mcpToolTotal = mcpCounts.tools;
+
+  // The row is a list of facts separated by slashes. Build the list and
+  // join it, so a tenant that has no model (or no provider) never leaves a
+  // dangling separator at the front.
+  const items: ReactNode[] = [];
+
+  if (prefs.showModels) {
+    items.push(
+      <button
+        key="model"
+        type="button"
+        className="aui-composer-meta aui-composer-meta-action"
+        onClick={prefs.openModels}
+        aria-label="Open models"
+      >
+        {modelLabel}
+      </button>,
+    );
+  }
+
+  if (showProvider) {
+    items.push(
+      prefs.showByok ? (
+        <button
+          key="provider"
+          type="button"
+          className="aui-composer-meta aui-composer-meta-action"
+          onClick={() => prefs.openByok()}
+          aria-label="Open provider menu"
+        >
+          {providerLabel}
+        </button>
+      ) : (
+        <span key="provider" className="aui-composer-meta">
+          {providerLabel}
+        </span>
+      ),
+    );
+  }
+
+  if (mcpCounts.servers > 0) {
+    items.push(
+      <button
+        key="mcp"
+        type="button"
+        className="aui-composer-meta aui-composer-meta-action"
+        onClick={() => prefs.openMcp()}
+        aria-label="Open MCP servers"
+      >
+        {mcpCounts.servers} MCP{mcpCounts.servers === 1 ? "" : "s"}
+      </button>,
+      <button
+        key="tools"
+        type="button"
+        className="aui-composer-meta aui-composer-meta-action"
+        onClick={() => prefs.openTools()}
+        aria-label="Open tools"
+      >
+        {mcpCounts.tools} tool{mcpCounts.tools === 1 ? "" : "s"}
+      </button>,
+    );
+  }
+
+  items.push(
+    <button
+      key="language"
+      type="button"
+      className="aui-composer-meta aui-composer-meta-action"
+      onClick={() => prefs.openLanguage()}
+      aria-label="Open response language"
+    >
+      {prefs.prefs.language.slice(0, 2).toUpperCase()}
+    </button>,
+  );
+
+  return (
+    <div data-slot="aui_composer-toolbar-inner" className="aui-composer-toolbar-inner">
+      {items.map((item, index) => (
+        <Fragment key={index}>
+          {index > 0 ? (
+            <span className="aui-composer-meta-sep" aria-hidden>
+              /
+            </span>
+          ) : null}
+          {item}
+        </Fragment>
+      ))}
+      <span className="aui-composer-meta-spacer" aria-hidden />
+      {/* A gate budget outranks the context estimate: it is the number that
+          stops the visitor, and it is available even when the backend
+          reports no token usage at all (a Foundry agent). A zero budget is
+          not a meter, so it falls through to the context slot. */}
+      {prefs.usage && prefs.usage.limit > 0 ? (
+        <DigichatUsageMeter usage={prefs.usage} />
+      ) : prefs.showContextMeter ? (
+        <DigichatContextMeter
+          model={meterModel}
+          toolCount={mcpToolTotal + prefs.catalogTools.length}
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/components/chat/skins/digichat-context-meter-shares.ts

@@ -0,0 +1,158 @@
+/**
+ * The context meter's share arithmetic, kept out of the component so it
+ * can be tested without a React tree.
+ *
+ * Decision (DIG-4459, #5967): the provider reports only the prompt
+ * total, so the system / tools / user split is an estimate. The three
+ * quantities are therefore a PARTITION of that reported total, never
+ * three independent estimates of it. The measured user text is clamped
+ * into the total first, the flat per-tool allowance is clamped into what
+ * is left, and the system prompt takes the remainder. The consequence is
+ * that the three token counts always sum to the reported total, so no
+ * share can print above 100 and the printed numbers always describe the
+ * same turn.
+ *
+ * The percentages are each computed from their own token count and then
+ * normalised to exactly 100 by the largest-remainder method, because
+ * independent rounding can sum to 99 or 101 and a leftover-derived
+ * share would then be wrong (the old leftover share went negative on a
+ * rounding remainder).
+ */
+
+/** Bar segments in the context meter grid. */
+export const CONTEXT_BAR_CELLS = 25;
+
+/** Rough tokens per tool schema (name, description, JSON schema). */
+export const CONTEXT_TOKENS_PER_TOOL = 220;
+
+export type ContextMeterShares = {
+  /** Token counts. They sum to the reported prompt total. */
+  systemTokens: number;
+  toolTokens: number;
+  userTokens: number;
+  /** Percentages. They sum to exactly 100 when a turn reported usage. */
+  systemPct: number;
+  toolPct: number;
+  userPct: number;
+  /** Bar cells. They sum to the used span. */
+  systemCells: number;
+  toolCells: number;
+  userCells: number;
+  /** Bar cells in the used span. */
+  usedCells: number;
+};
+
+export type ContextMeterInput = {
+  /** Prompt total the provider reported for the last turn, 0 when unknown. */
+  input: number;
+  /** Characters of user text in the thread. */
+  userChars: number;
+  /** Connected tool count, used for the schema estimate. */
+  toolCount: number;
+  /** The model's context window, in tokens. */
+  window: number;
+};
+
+/** Rough tokens for the user text held in the thread. */
+const userTokensFromChars = (userChars: number): number =>
+  Math.round(userChars / 4);
+
+/**
+ * Round exact shares so the rounded values sum to exactly 100.
+ *
+ * Largest remainder: floor every share, then hand the leftover points
+ * to the shares with the biggest fractional part. Each result stays
+ * within one point of its exact share and no result is negative.
+ */
+const normaliseToHundred = (exact: readonly number[]): number[] => {
+  const rounded = exact.map((value) => Math.floor(value));
+  const exactTotal = exact.reduce((sum, value) => sum + value, 0);
+  // Only a set of exact shares that adds up to a hundred can be
+  // normalised. Anything else (no reported usage) is left alone, so the
+  // leftover points are never handed out against nothing.
+  if (Math.abs(exactTotal - 100) > 0.5) {
+    return exact.map((value) => Math.round(value));
+  }
+  let leftover = 100 - rounded.reduce((sum, value) => sum + value, 0);
+  if (leftover <= 0) return rounded;
+  const order = exact
+    .map((value, index) => ({
+      index,
+      fraction: value - Math.floor(value),
+    }))
+    .sort((a, b) => b.fraction - a.fraction || a.index - b.index);
+  for (const { index } of order) {
+    if (leftover <= 0) break;
+    rounded[index] += 1;
+    leftover -= 1;
+  }
+  return rounded;
+};
+
+/**
+ * Split a reported prompt total into system, tools and user.
+ *
+ * The token counts are a partition of `input`, so they always sum to it
+ * and no share can exceed 100. The percentages are each derived from
+ * their own token count and normalised to exactly 100.
+ */
+export const computeContextShares = ({
+  input,
+  userChars,
+  toolCount,
+  window,
+}: ContextMeterInput): ContextMeterShares => {
+  const total = input > 0 ? input : 0;
+
+  // Partition of the reported total: measured text first, then the flat
+  // tool estimate into what is left, then the remainder is the system
+  // prompt.
+  const userTokens =
+    total > 0 ? Math.min(userTokensFromChars(userChars), total) : 0;
+  const toolTokens =
+    total > 0
+      ? Math.min(toolCount * CONTEXT_TOKENS_PER_TOOL, total - userTokens)
+      : 0;
+  const systemTokens = total - userTokens - toolTokens;
+
+  const exact =
+    total > 0
+      ? [
+          (userTokens / total) * 100,
+          (toolTokens / total) * 100,
+          (systemTokens / total) * 100,
+        ]
+      : [0, 0, 0];
+  // With no reported usage there is nothing to normalise: the three
+  // exact shares are zero, not a third of a hundred each.
+  const [userPct, toolPct, systemPct] =
+    total > 0 ? normaliseToHundred(exact) : [0, 0, 0];
+
+  // The used span grows with the window ratio; inside it the three types
+  // take their share of the prompt.
+  const ratio = window > 0 ? Math.min(1, total / window) : 0;
+  const usedCells =
+    total > 0 ? Math.max(1, Math.round(ratio * CONTEXT_BAR_CELLS)) : 0;
+  const systemCells = Math.min(
+    usedCells,
+    total > 0 ? Math.round((usedCells * systemTokens) / total) : 0,
+  );
+  const toolCells = Math.min(
+    usedCells - systemCells,
+    total > 0 ? Math.round((usedCells * toolTokens) / total) : 0,
+  );
+  const userCells = Math.max(0, usedCells - systemCells - toolCells);
+
+  return {
+    systemTokens,
+    toolTokens,
+    userTokens,
+    systemPct,
+    toolPct,
+    userPct,
+    systemCells,
+    toolCells,
+    userCells,
+    usedCells,
+  };
+};