@columenlabs/lumen-ui 0.1.276 → 0.1.278

package/dist/assistant/usage-history.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuery } from '@tanstack/react-query';
-import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon, CpuIcon, HashIcon, KeyRoundIcon, MessageSquareIcon, ReceiptIcon, } from 'lucide-react';
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon, CpuIcon, HashIcon, KeyRoundIcon, MessageSquareIcon, MessagesSquareIcon, ReceiptIcon, } from 'lucide-react';
 import { Fragment, useEffect, useMemo, useState } from 'react';
 import { DetailsTable } from '../details-table.js';
 import { IconButton } from '../icon-button.js';
@@ -291,6 +291,13 @@ function usageRows(h) {
             credits: (s?.credits ?? 0) + Math.max(0, e.usd - key),
             plan: (s?.plan ?? 0) + plan,
             planCalls,
+            ...(e.turns || s?.turns
+                ? {
+                    turns: (s?.turns ?? 0) + (e.turns ?? 0),
+                    images: (s?.images ?? 0) + (e.images ?? 0),
+                    refs: (s?.refs ?? 0) + (e.refs ?? 0),
+                }
+                : {}),
         };
         // Its type is whoever paid most; the hover splits the rest.
         const top = Math.max(row.key, row.credits, row.plan);
@@ -330,6 +337,15 @@ function usageRows(h) {
     // The app's own calls are kept (and counted above, so no Earlier row takes them) but not shown.
     return out.filter((r) => r.type !== 'internal');
 }
+const plural = (n, one) => `${n} ${one}${n === 1 ? '' : 's'}`;
+/** A row's attachments: their count, then each kind there was (`3 · 2 images, 1 pick`). */
+const attachments = (r) => {
+    const kinds = [
+        ...(r.images ? [plural(r.images, 'image')] : []),
+        ...(r.refs ? [plural(r.refs, 'pick')] : []),
+    ];
+    return kinds.length ? `${(r.images ?? 0) + (r.refs ?? 0)} · ${kinds.join(', ')}` : '0';
+};
 /** A row's hover: its tokens (cache reads as a share of input) and what it cost, by who paid. */
 function UsageTip({ r, children }) {
     const t = r.tokens;
@@ -341,6 +357,8 @@ function UsageTip({ r, children }) {
                 ['Output', tokens(t.out)],
             ]
             : []),
+        ...(r.turns ? [['Turns', String(r.turns)]] : []),
+        ...(r.turns ? [['Attachments', attachments(r)]] : []),
         ...(r.key > 0 ? [['Cost (your key)', money(r.key)]] : []),
         ...(r.credits > 0 || (r.type === 'credits' && !r.plan)
             ? [['Credits', money(r.credits)]]
@@ -395,9 +413,8 @@ const USAGE_FIELDS = [
         label: 'Session',
         icon: MessageSquareIcon,
         format: 'text',
-        // Names run long (a chat's first line): as wide as the table leaves after its other columns
-        // (the table's box is a size container), never under the usual name column.
-        maxWidth: 'max(12rem, calc(100cqw - 22rem))',
+        // Names run long (a chat's first line): all the width the other columns leave.
+        maxWidth: 'fill',
         value: (r) => r.title,
         render: (r) => (_jsx(UsageTip, { r: r, children: _jsx("span", { 
                 // biome-ignore lint/a11y/noNoninteractiveTabindex: a keyboard reaches the row's hover
@@ -422,6 +439,17 @@ const USAGE_FIELDS = [
         value: (r) => r.at,
         render: (r) => (_jsx(UsageTip, { r: r, children: r.at ? (_jsx("time", { dateTime: new Date(r.at).toISOString(), className: "text-muted-foreground", children: relWhen(r.at) })) : (_jsx("span", { className: "text-muted-foreground", children: EARLIER })) })),
     },
+    {
+        key: 'turns',
+        label: 'Turns',
+        icon: MessagesSquareIcon,
+        format: 'integer',
+        hideOnPhone: true,
+        aggregate: 'sum',
+        // A run, or a chat from before turns were counted, has none: a dash, not 0.
+        value: (r) => r.turns ?? null,
+        render: (r) => (_jsx(UsageTip, { r: r, children: _jsx("span", { className: cn(!r.turns && 'text-muted-foreground'), children: r.turns ?? '—' }) })),
+    },
     {
         key: 'calls',
         label: 'Calls',
@@ -482,5 +510,5 @@ export function AssistantUsageTable({ client }) {
         return null;
     if (!q.data)
         return (_jsx("div", { className: "flex justify-center p-4", children: q.isError ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Usage didn't load. Try again later." })) : (_jsx(Spinner, {})) }));
-    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(LumenTokenizedFilter, { filter: filter, label: "Filter usage", placeholder: "Filter: type, or a session name", className: "min-w-48 flex-1", link: null }), _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: group, "aria-label": "Group by", onValueChange: (v) => v && setGroup(v), children: GROUPS.map((g) => (_jsx(ToggleGroupItem, { value: g.id, "aria-label": `Group by ${g.label}`, children: g.label }, g.id))) })] }), _jsx("div", { className: "@container min-w-0", children: _jsx(LumenTable, { domain: USAGE_DOMAIN, rows: filter.results, groupBy: GROUPS.find((g) => g.id === group)?.field ?? null, sort: { key: 'at', desc: true }, emptyState: rows.length ? undefined : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing used this month." })), onClearFilter: filter.clear }) }), _jsxs("p", { className: "text-muted-foreground text-xs", children: ["Sign-in amounts are estimates: your ", PLAN_NAME, " charges $0, so the amount is what the same tokens would cost at the model's API rates. Key and credit amounts are what was charged."] })] }));
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(LumenTokenizedFilter, { filter: filter, label: "Filter usage", placeholder: "Filter: type, or a session name", className: "min-w-48 flex-1", link: null }), _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: group, "aria-label": "Group by", onValueChange: (v) => v && setGroup(v), children: GROUPS.map((g) => (_jsx(ToggleGroupItem, { value: g.id, "aria-label": `Group by ${g.label}`, children: g.label }, g.id))) })] }), _jsx("div", { className: "min-w-0", children: _jsx(LumenTable, { domain: USAGE_DOMAIN, rows: filter.results, groupBy: GROUPS.find((g) => g.id === group)?.field ?? null, sort: { key: 'at', desc: true }, emptyState: rows.length ? undefined : (_jsx("p", { className: "text-muted-foreground text-sm", children: "Nothing used this month." })), onClearFilter: filter.clear }) }), _jsxs("p", { className: "text-muted-foreground text-xs", children: ["Sign-in amounts are estimates: your ", PLAN_NAME, " charges $0, so the amount is what the same tokens would cost at the model's API rates. Key and credit amounts are what was charged."] })] }));
 }

package/dist/lumen-view.js

@@ -493,12 +493,18 @@ const colPropsOf = (units) => (f, ...more) => ({
     className: cn(colOf(f), ...more),
     'data-col': f?.key,
     'data-units': f && units.has(f.key) ? '' : undefined,
+    'data-fill': f?.maxWidth === 'fill' ? '' : undefined,
 });
 /**
  * A column's widest cell (`maxWidth`): the first column defaults to `--lead-col-max` (18rem in
  * theme.css), so one long name never pushes the other columns off screen; `false` lifts it.
+ * `fill` takes the room the other columns leave (theme.css `[data-fill]`), so its cell holds to it.
  */
-const capOf = (f, i) => f.maxWidth === false ? undefined : (f.maxWidth ?? (i === 0 ? 'var(--lead-col-max)' : undefined));
+const capOf = (f, i) => f.maxWidth === false
+    ? undefined
+    : f.maxWidth === 'fill'
+        ? '100%'
+        : (f.maxWidth ?? (i === 0 ? 'var(--lead-col-max)' : undefined));
 /** Holds a cell to its column's cap on one line: text past it ends in an ellipsis. `end` keeps a
  *  right-aligned column's value on its right edge (the wrapper is a flex row, which `text-right`
  *  alone does not move), so a capped or resized column keeps one edge. */

package/dist/theme.css

@@ -537,6 +537,18 @@
   );
 }
 
+/* A column that fills (`ViewField.maxWidth: 'fill'`): it takes the width the other columns leave
+   and gives none of its own text's width to the table (max-width: 0), so its cells end in an
+   ellipsis only where the table truly has no more room. Never under 12rem: narrower, the table
+   scrolls. A phone's cards lay the row out themselves. */
+@media (min-width: 640px) {
+  [data-slot="table"] :is(th, td)[data-fill] {
+    width: 100%;
+    max-width: 0;
+    min-width: 12rem;
+  }
+}
+
 /* A LumenView table on a narrow phone (`data-cards`): each row is a card, so nothing runs off
    the right edge, and every row is ONE line, whatever an app draws in it: the row's name (shortens
    in an ellipsis), then one figure (`data-card="meta"`, the sorted one, else the first number or

package/dist/view-model.d.ts

@@ -141,9 +141,10 @@ export interface ViewField<T> {
     /**
      * The column's widest cell, a CSS length (`14rem`): past it the cell ends in an ellipsis on one
      * line, the full text in its hover. The first column defaults to `--lead-col-max` (18rem);
-     * `false` lets it grow.
+     * `false` lets it grow. `fill` gives it all the width the other columns leave (at least 12rem),
+     * so a long name ends in an ellipsis only where the table truly has no more room.
      */
-    maxWidth?: string | false;
+    maxWidth?: 'fill' | (string & {}) | false;
     /** Left out on phones, where the table has no room for it (a returns table's longer windows). */
     hideOnPhone?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.276",
+  "version": "0.1.278",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.276",
+    "@columenlabs/lumen-ui-types": "0.1.278",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",