@ai-ecoverse/slicc-spectrum 1.69.2 → 1.70.0

package/README.md

@@ -137,7 +137,7 @@ Text is Adobe Clean Spectrum VF, falling back to Adobe Clean, and code is Spectr
 | `<slicc-app>` | The shell: header with the agent picker, status items, the update status, the network indicator, the tray, the View menu and the theme switch, rails, and a `<slicc-dock>`. Saves the dock layout per screen class to `storage` (default `localStorage`) under `layoutKey`. While connected it sets `overscroll-behavior` to `none !important` on the page's `html` and `body`, so only scroll areas inside panels rubber-band. It sets the page's `color-scheme` to its resolved theme, and when the page has a `theme-color` meta per `prefers-color-scheme`, gives every one of them the content of the meta for that theme, so the page and the installed app's title bar follow the app's setting instead of the OS. When the last app on the page is removed, the page's own inline values and `theme-color` contents come back. With a `follow` port, the header shows a `<slicc-follow>` chip, and while the follower connects, waits to be allowed, is unlinked or fails, a `<slicc-follow page>` (`.alone[data-follow]` with the page kind) takes the place of the panels; without Terminal access, the terminal surface and New terminal aren't offered, and open terminals close when it's taken away. |
 | `<slicc-dock>` | Generic. [dockview-core](https://dockview.dev/) 8 with a theme mapped to Spectrum tokens, in its own shadow root. Panels come from `factories` (`name → (params) => HTMLElement`). `open`, `close`, `has`, `content`, `focusPanel`, `cycleGroup`, `cycleTab`, `toJSON`, `restore`, `clear`, and the full `api`. Tabs have a context menu (close, close others, float, maximize). Events: `layout-change`, `active-panel-change`, `panel-close`. |
 | `<slicc-agents>` | Cones with their scoops, status, context fill and unread count. A cone's row has a second line with its conversation title, as does its item in the header's cone picker: `Agent.title`, or else the first line of the first user message, or "No messages yet". When cones share a name, their accessible names and the Delete cone, Freezer and confirmation labels add the title, as in "Delete cone sliccy (Hello from Bedrock)". Selecting one makes it the active agent. |
-| `<slicc-chat>` | One thread's conversation (its `agent`, or the active agent if unset), by day: user messages (with attachments and a quiet timestamp, `time.when`; the reader's own carry no name or delivery tag, while `data-mode` and `data-delivered` still say how they went; a message from another cone, a follower or a guest says who sent it, and an agent's request carries its name and an Agent badge), assistant messages (with the time, and the model only on the first reply and whenever it changes from the previous one, `.meta .model` with the usage as its tooltip; the cone's name isn't repeated; Markdown with tables, task lists, quotes, code and images; thinking; tool calls, grouped into a collapsible cluster from three in a row, each with its input (a shell command after `$`), an optional `meta` such as a timeout, an edit's `diff` shown as a diff view, and an `image`, such as a screenshot, shown as a thumbnail under the closed card and in full when open, its output wrapped rather than cut off, and its `notes` (`{ severity, text }`, such as "Exited with code 5" or "Full output in /tmp/…") as lines under the output, `li[data-note][data-severity]`: `error` with an alert icon in the negative colour, `warn` with an alert icon and `info` with an info icon, both subdued; media galleries with images, video and audio; action cards for tools, pull requests and status; plans and checklists; inline diffs; question prompts; delegations; link previews; errors with a fix-it action; a content-filter stop offers **Drop the last turn**, which rewinds that turn and puts its prompt back into the composer; when the turns right before it failed too, the button reads **Drop N failed turns** and rewinds to before the first of them, putting the latest prompt back), standalone tool results, system messages (compaction markers, error cards, notices) and licks, SLICC's events into a cone, on every channel; a lick's `severity` (`warn` or `error`) turns its channel badge into a notice or negative one with an alert icon. Permission requests are allowed or denied in place. The header is one row: the status, a model picker that names each model's provider and leaves out classifiers and models with `tools: false` (with no model on offer, **Set up a model**, `data-action="set-up-model"`, opens Settings), the thinking picker, the context meter and **New conversation**, which calls `clear` and puts focus back in the composer; on a cone, when the port can freeze, its tooltip says the old conversation stays in the Freezer. It never wraps: when it's short of room, the model picker's label is cut with an ellipsis, and under 560px wide (`header[data-compact]`) New conversation is icon-only, with `accessible-label` and its tooltip. The pickers re-read `models()` on `settings`, `accounts` and `agents`. When a live agent's model, or `Settings.model`, is no longer offered and its provider (the id before `/`) isn't a connected account, it moves to the offered chat model with `default: true`, else the first one; frozen agents are left alone, and so is everything on a follower unless it has Control and is connected. The chat re-runs this on `follow` too, and `<slicc-app>` does it as well, when it binds, on those events and on `follow`, so a new cone that starts on a provider that isn't set up moves at once. Between the header and the transcript, a `<slicc-notices>` shows the model's notices. On a follower without Control, a note (`p[data-follow="watch"]`) takes the composer's place, the header shows the model's name instead of the pickers and New conversation, and there's no suggested follow-up. |
+| `<slicc-chat>` | One thread's conversation (its `agent`, or the active agent if unset), by day: user messages (with attachments and a quiet timestamp, `time.when`; the reader's own carry no name or delivery tag, while `data-mode` and `data-delivered` still say how they went; a message from another cone, a follower or a guest says who sent it, and an agent's request carries its name and an Agent badge), assistant messages (with the time, and the model only on the first reply and whenever it changes from the previous one, `.meta .model` with the usage as its tooltip; the cone's name isn't repeated; Markdown with tables, task lists, quotes, code and images; thinking; tool runs, centred in the column, one icon per run (`<slicc-tool-runs>`): three or more runs in a row form a cluster, a strip of icon buttons (`data-action="open-run"`, `data-target` the call's id, named by its `title` and status, `aria-expanded`) and a summary (`data-action="open-cluster"`, such as "3 commands, 1 read" and the overall state) that open one run's card or every card below it; prose breaks a run, hidden thinking and source links don't, and a standalone tool message or a done reply with only tool calls continues the run before it on the same day, its `data-id` moving onto its first card (`details.tool[data-id]`); a single run is a centred pill showing its `title`, which opens with <kbd>Enter</kbd> or <kbd>Space</kbd> like the strip's buttons. A command's icon is the favicon of the site it names when an open browser tab already has a `data:` favicon for it (nothing is fetched; otherwise the globe), else the file browser's icon for the file it names, else the code icon; other tools show their kind's icon. A running run pulses (still, with a dashed ring, under `prefers-reduced-motion`), a done or cancelled one is grey and a failed one red, each with a corner glyph. The card (`details.tool[data-tool][data-status][data-kind]`) shows the command only when open: its input (a shell command after `$`), an optional `meta` such as a timeout, an edit's `diff` shown as a diff view, and an `image`, such as a screenshot, shown as a thumbnail under the closed card and in full when open, its output wrapped rather than cut off, a standalone tool message's time ("Ran at 16:12", `.ran`), and its `notes` (`{ severity, text }`, such as "Exited with code 5" or "Full output in /tmp/…") as lines under the output, `li[data-note][data-severity]`: `error` with an alert icon in the negative colour, `warn` with an alert icon and `info` with an info icon, both subdued; media galleries with images, video and audio; action cards for tools, pull requests and status; plans and checklists; inline diffs; question prompts; delegations; link previews; errors with a fix-it action; a content-filter stop offers **Drop the last turn**, which rewinds that turn and puts its prompt back into the composer; when the turns right before it failed too, the button reads **Drop N failed turns** and rewinds to before the first of them, putting the latest prompt back), system messages (compaction markers, error cards, notices) and licks, SLICC's events into a cone, on every channel; a lick's `severity` (`warn` or `error`) turns its channel badge into a notice or negative one with an alert icon. Permission requests are allowed or denied in place. The header is one row: the status, a model picker that names each model's provider and leaves out classifiers and models with `tools: false` (with no model on offer, **Set up a model**, `data-action="set-up-model"`, opens Settings), the thinking picker, the context meter and **New conversation**, which calls `clear` and puts focus back in the composer; on a cone, when the port can freeze, its tooltip says the old conversation stays in the Freezer. It never wraps: when it's short of room, the model picker's label is cut with an ellipsis, and under 560px wide (`header[data-compact]`) New conversation is icon-only, with `accessible-label` and its tooltip. The pickers re-read `models()` on `settings`, `accounts` and `agents`. When a live agent's model, or `Settings.model`, is no longer offered and its provider (the id before `/`) isn't a connected account, it moves to the offered chat model with `default: true`, else the first one; frozen agents are left alone, and so is everything on a follower unless it has Control and is connected. The chat re-runs this on `follow` too, and `<slicc-app>` does it as well, when it binds, on those events and on `follow`, so a new cone that starts on a provider that isn't set up moves at once. Between the header and the transcript, a `<slicc-notices>` shows the model's notices. On a follower without Control, a note (`p[data-follow="watch"]`) takes the composer's place, the header shows the model's name instead of the pickers and New conversation, and there's no suggested follow-up. |
 | `<slicc-notices>` | The model's `notices` as in-line alerts with their actions and a close button, after a banner from the `tabs` port when another tab is paused or runs a different SLICC, and a warning for each waiting approval when the `approvals` port has no `decide` (`[data-approval-notice]`); renders nothing without any. |
 | `<slicc-approvals>` | The model's waiting `approvals` as a modal alert dialog, one at a time, oldest first; `<slicc-app>` mounts it. Renders nothing without `approvals.decide`. A request that `secretRules()` flags shows a warning (`[data-secret-rules]`, the path or token) and no **Always allow**. Focus starts on Deny and goes back, after Deny, Always allow, Allow once, <kbd>Esc</kbd> or Close, to what had it when the dialog opened; inside a terminal, to that `<slicc-terminal>` through its own `focus()`, even when it remounted meanwhile. |
 | `<slicc-follow>` | The model's `follow` state. By default a header chip (`#chip[data-follow]` with the link state: **Connecting to**, **Following**, **Reconnecting to**, **Unlinked from** or **Can’t reach** the owner; `compact` keeps only a follow icon and the light) whose popover says what this device can do (`[data-can]`), that the conversation may be out of date while reconnecting, and with Control that sending waits (`[data-reconnecting]`), and has **Leave** (`data-action="leave"`, behind a confirm unless unlinked). With `page`, the full page for `connecting`, `waiting` (connected without View: "Waiting for {owner} to allow this device"), `unlinked` and `failed` (`[data-follow-page]`), with **Try again** (`data-action="retry"`) when failed and the port has `retry`, and **Leave**. A rejected call shows its message (`[data-error]`). Renders nothing without the port. |
@@ -293,7 +293,7 @@ Each section is its own port, so an embedder can mix real and dummy per section,
 
 `<slicc-file-view>` has **Edit**: the file opens in a plain text area, and **Save** or `Mod+S` writes it through `files.write`; `Escape` cancels.
 
-The `kitchen-sink` cone holds every kind of message, content and lick in one conversation, for design work and screenshots. The dummy's fixtures are invented: a small forecast API called harbor, with cones, scoops, a conversation per agent, pending changes (one of them binary, without a diff), browser tabs and accounts. Its only sprinkles are SLICC's own: `welcome` (the onboarding wizard, as a dip in the sliccy cone) and `suggestions`, copied from `slicc` (`packages/vfs-root/shared/sprinkles/`, commit `aa29784`) with their comments stripped, as is the sprinkle theme in `src/app/sprinkle-theme.css`. `suggestions` reads its stream from the invented `/home/.gelatiere/suggestions.json` through the bridge; there is no `/home/.welcomed`, so `welcome` starts its wizard. Its replies are scripted by keyword (tests, fix or add, open or docs, files, anything else), and their tool calls act on the other ports: an edit writes a file and shows up as a change, a browse opens a tab.
+The `kitchen-sink` cone holds every kind of message, content and lick in one conversation, for design work and screenshots. Its tool turn has two clusters and a standalone run with URL, file and plain commands in every state, and two dummy browser tabs carry invented `data:` favicons. The dummy's fixtures are invented: a small forecast API called harbor, with cones, scoops, a conversation per agent, pending changes (one of them binary, without a diff), browser tabs and accounts. Its only sprinkles are SLICC's own: `welcome` (the onboarding wizard, as a dip in the sliccy cone) and `suggestions`, copied from `slicc` (`packages/vfs-root/shared/sprinkles/`, commit `aa29784`) with their comments stripped, as is the sprinkle theme in `src/app/sprinkle-theme.css`. `suggestions` reads its stream from the invented `/home/.gelatiere/suggestions.json` through the bridge; there is no `/home/.welcomed`, so `welcome` starts its wizard. Its replies are scripted by keyword (tests, fix or add, open or docs, files, anything else), and their tool calls act on the other ports: an edit writes a file and shows up as a change, a browse opens a tab.
 
 ### Distribution
 

package/dist/slicc-dummy.js

@@ -2975,6 +2975,112 @@ function opening() {
     }
   ];
 }
+function runs() {
+  return [
+    {
+      id: "k-u6",
+      role: "user",
+      text: "Get the forecast docs ready for the Celsius release.",
+      createdAt: at(13)
+    },
+    {
+      id: "k-m8",
+      role: "assistant",
+      status: "done",
+      createdAt: at(13.1),
+      model: "claude-sonnet-5-5",
+      parts: [
+        { type: "text", text: "Checking what the docs and the API say today." },
+        ...[
+          tool(
+            "k-r1",
+            "bash",
+            "Ask the API for Lisbon",
+            "curl -s https://api.example.com/v2/forecast?city=Lisbon",
+            '{ "city": "Lisbon", "high": 71, "low": 58, "unit": "F" }'
+          ),
+          tool(
+            "k-r2",
+            "bash",
+            "Read the forecast page",
+            "cat /workspace/harbor/docs/forecast.md",
+            "# Forecast\n\nTemperatures are in Fahrenheit."
+          ),
+          tool("k-r3", "bash", "See what changed", "git status --short", " M src/lib/units.ts"),
+          tool(
+            "k-r4",
+            "read_file",
+            "Read the units helper",
+            "/workspace/harbor/src/lib/units.ts",
+            "export function toCelsius(f: number): number {\u2026}",
+            { paths: ["/workspace/harbor/src/lib/units.ts"] }
+          )
+        ].map((call) => ({ type: "tool", tool: call })),
+        {
+          type: "text",
+          text: "The page still says Fahrenheit. Updating it, then building and testing."
+        },
+        ...[
+          tool(
+            "k-r5",
+            "edit_file",
+            "Switch the page to Celsius",
+            "/workspace/harbor/docs/forecast.md",
+            "Edited 1 line",
+            {
+              paths: ["/workspace/harbor/docs/forecast.md"],
+              diff: {
+                before: "# Forecast\n\nTemperatures are in Fahrenheit.\n",
+                after: "# Forecast\n\nTemperatures are in Celsius.\n"
+              }
+            }
+          ),
+          tool("k-r6", "bash", "Build the site", "npm run build", "Built 14 pages in 2.1s", {
+            meta: "timeout 120s"
+          }),
+          tool(
+            "k-r7",
+            "bash",
+            "Run the unit tests",
+            "npx vitest run src/lib/units.test.ts",
+            "FAIL src/lib/units.test.ts > rounds half to even\nExpected 22, received 21",
+            {
+              status: "error",
+              notes: [{ severity: "error", text: "Exited with code 1" }]
+            }
+          ),
+          tool(
+            "k-r8",
+            "bash",
+            "Open the release pull request",
+            'gh pr create --repo https://git.example.com/example/harbor --title "Celsius docs"',
+            "Stopped before the tests pass",
+            { status: "cancelled" }
+          ),
+          tool("k-r9", "bash", "Watch the preview logs", "wrangler tail --env preview", "", {
+            status: "running"
+          })
+        ].map((call) => ({ type: "tool", tool: call })),
+        {
+          type: "text",
+          text: "One test fails on rounding, so the pull request waits for the fix."
+        }
+      ]
+    },
+    {
+      id: "k-tool2",
+      role: "tool",
+      createdAt: at(13.5),
+      tool: tool(
+        "k-r10",
+        "bash",
+        "Check the preview port",
+        "lsof -i :8787",
+        "workerd 4120 harbor 12u IPv4 TCP localhost:8787 (LISTEN)"
+      )
+    }
+  ];
+}
 function work() {
   return [
     {
@@ -3217,7 +3323,7 @@ function events() {
   ];
 }
 function showcase() {
-  return [...opening(), ...work(), ...events()];
+  return [...opening(), ...runs(), ...work(), ...events()];
 }
 function showcaseQueue() {
   return [
@@ -3995,14 +4101,16 @@ var tabs = [
     title: "Forecast API reference",
     url: "https://api.example.com/docs/v2/forecast",
     status: "complete",
-    agentId: null
+    agentId: null,
+    favicon: `data:image/svg+xml;charset=utf-8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="16" height="16" rx="3" fill="#7a5af8"/><text x="8" y="12" font-family="sans-serif" font-size="11" font-weight="700" fill="#ffffff" text-anchor="middle">A</text></svg>')}`
   },
   {
     id: "tab-pull",
     title: "Add retries for upstream timeouts \xB7 Pull request #58",
     url: "https://git.example.com/example/harbor/pull/58",
     status: "complete",
-    agentId: "scoop-otter"
+    agentId: "scoop-otter",
+    favicon: `data:image/svg+xml;charset=utf-8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="16" height="16" rx="3" fill="#0a7a43"/><text x="8" y="12" font-family="sans-serif" font-size="11" font-weight="700" fill="#ffffff" text-anchor="middle">G</text></svg>')}`
   }
 ];
 var terminals = [