paseo-readable-agent-activity 0.0.0-stage → 0.1.0-beta.11

package/CHANGELOG.md

@@ -0,0 +1,91 @@
+# Changelog
+
+## 0.1.0-beta.11 — 2026-10-18
+
+- Publish on npm as `paseo-readable-agent-activity`, so the Paseo registry can track new versions without a manual pull request. The plugin ID stays `readable-agent-activity`; behavior is unchanged from beta.10.
+- Move `prism-react-renderer` and `@getpaseo/protocol` to runtime dependencies. The client bundle compiles code from both, and an npm installation omits development dependencies. The package ships an `npm-shrinkwrap.json` for them, and its manifest has no build steps; the Git manifest keeps them.
+- The packed package loaded on an isolated Paseo 0.12.0-beta.3 daemon, installed from npm through a local registry and from the unpacked directory. In the 0.12.0-beta.3 web client, DeepSeek Harness tool calls showed cards with the main argument on the collapsed header.
+
+## 0.1.0-beta.10 — 2026-10-18
+
+- Show the call's main argument after the tool name on the collapsed card header: the shell command, file path, search query or URL from the native tool detail, or the first of `command`, `cmd`, `file_path`, `filePath`, `path`, `pattern`, `query` and `url` in an unknown tool's input. It is one literal value, never a generated summary: the first line of a 200-character prefix, with `…` when anything was left out. It uses the muted monospace style and shrinks before the tool name.
+- Typecheck, lint and 275 tests pass with SDK 0.9.2 and 0.11.4. Checked live on a Paseo 0.12.0-beta.2 daemon in the hosted web client with real DeepSeek Harness tool calls; the desktop app and native mobile were not checked.
+
+## 0.1.0-beta.9 — 2026-09-29
+
+- Add two Command Center actions: **Activity: use native tool rows (for Summary)** unregisters only the tool-call transformer, so Summary groups native tool rows again; **Activity: use tool cards (Full detail)** restores the cards. The choice is per client, not saved, and resets to cards when the plugin loads. The plugin still never reads or changes the host display preference.
+- The Thinking adapter stays registered in both modes; reasoning rows never join Summary groups.
+- Typecheck, lint and 253 tests pass with SDK 0.9.2 and 0.10.1, including Hermes bundle evaluation of the commands and a pinned 0.9.2 host test that regroups existing history after the switch. On a live 0.10.1 daemon in the hosted web client, the commands regrouped an existing conversation in Summary and restored the cards; the desktop app and mobile were not checked.
+
+## 0.1.0-beta.8 — 2026-09-28
+
+- Support Paseo 0.9.2 and 0.10.0-beta.1. The manifest now declares only the minimum `>=0.8.0`, following Paseo's requirements contract; the beta.7 `<0.10.0` bound made the 0.10.0-beta.1 daemon reject the plugin. Later releases are not tested.
+- Pin the SDK development dependencies to 0.9.2. Typecheck, lint and all 252 tests pass with SDK 0.9.2 and with SDK 0.10.0-beta.1. Runtime behavior is unchanged; only code comments were updated.
+- Refresh the 0.9 host fixtures from v0.9.2, byte-identical in v0.10.0-beta.1. Only assistant-message Markdown splitting changed upstream; tool-call projection and grouping did not. Summary remains unsupported. Beta.8 rendered live on a 0.10.0-beta.1 daemon in the hosted web client; the desktop app and native mobile checks are still pending.
+
+## 0.1.0-beta.7 — 2026-09-18
+
+- Support Paseo 0.9.0-beta.1 with updated SDK dependencies and a bounded compatibility range; retain 0.8 host regression fixtures.
+- Keep native plan tools and structured plan cards out of the custom tool renderer, preserving 0.9 plan suppression and disclosure.
+- Add unmodified 0.9 presentation fixtures for Full detail, Summary limitations, streaming/history identity, reasoning and speech. Summary remains unsupported: 0.9 retains all calls but does not group plugin cards.
+
+## 0.1.0-beta.6 — 2026-09-13
+
+- Unify ordinary and codex-conversion tools under Input / Output with one Show all / Show less. Preview twenty source lines and cap automatic wrapping to twenty displayed line-heights per section. No second character cap or independently scrolling output box.
+- Fix long JSON strings/plain text/Thinking bypassing the preview limit: measure wrapped content and show the same Show all even when there are fewer than twenty source lines. Full text, highlighting, selection and manual streaming disclosure remain intact; preserve ancestor scrolling and scale the cap with system text size.
+- Retain complete output metadata, traces and attachment data; only unwrap pure source/text transports. Preserve JSON numeric lexemes, duplicate keys, escapes and native detail fields.
+- Highlight JSON keys/strings/literals with theme-aware, readable colors. Use one selectable text with actual newlines for copying.
+- Remove the old Markdown reasoning renderer, generated summaries/diffs, separate tool rendering paths and Raw/Copy toolbars. Keep tool logos, host lifecycle status, non-JSON fallback and manual streaming disclosure. Remove the unused diff dependencies.
+- Use a minimal Thinking disclosure row with original plain text. Match native default labels with 14px text, natural leading and 12px icons on both desktop and mobile; remove the trial's extra 44px mobile header minimum. Browser reference sequences measure 33px pitch versus 32px all-native (previous compact trial: 60px). Host gaps remain; header hit areas are smaller than native badges. Show all keeps its 44px compact target. No negative margins, body rewriting or restored Markdown parser.
+- Add three side-by-side native-reference/plugin screenshots using the same synthetic data. Replace obsolete screenshot assets so Cafe does not display the old UI.
+- Local trial accepted; 239 tests pass, including wrapped-preview regressions and real Hermes bundle evaluation. No new installation or daemon restart. Summary remains unsupported; see docs/verification.md for limits.
+
+## 0.1.0-beta.5
+
+- Move development and releases to `geoqiao/paseo-stuff`, subdirectory `plugins/agent-activity`, retaining the `readable-agent-activity` plugin ID. Old standalone tags remain unchanged; installed Git sources do not migrate automatically.
+- Fix the native client loading path by replacing eager Shiki dependencies with the function-based, non-global Prism runtime from `prism-react-renderer`. Use its explicit ESM entry to work with Paseo's neutral bundler and eager CommonJS interop.
+- Keep theme-derived token colors, exact text, the highlight/cache bounds and literal fallback. Shell highlighting uses a small local grammar; token classifications can differ from Shiki.
+- Add complete-bundle evaluation tests, including the actual RN 0.81.5 Hermes executable, plus language/Unicode/CRLF/streaming/failure regressions. All 251 tests pass; native phone UI confirmation is still pending.
+- Reloaded the existing enabled local installation successfully. This fix is included in the monorepo beta.5; the old standalone beta.4 tag does not include it.
+
+## 0.1.0-beta.4
+
+- Fix the missing Get Agent Activity header icon: replace the nonexistent `ListActivity` name with the supported `Activity` glyph. Formatting, spacing, summaries and disclosure behavior are unchanged.
+- Validate all 62 configured Paseo tool icon names against Lucide 0.546.0 exports, including aliases, using a pinned test-only dependency. Production still uses the public host Icon with no added runtime dependency.
+- Add four tool-name normalization cases and two renderer regressions for icon size/color and manual disclosure through status updates. All seven new cases failed before the fix; all 224 tests now pass.
+- Browser checks cover real SVGs for all 62 mappings in wide dark/narrow light layouts, plus the existing UI suite. Local Paseo 0.8.0 reload succeeded; these browser checks are not native-mobile verification.
+
+## 0.1.0-beta.3
+
+- Share hunk-aware classification between diff colors and counts, so source lines beginning with `+++` or `---` are not confused with file headers. Accept whitespace-stripped blank context lines; preserve other partial/malformed input with a conservative fallback.
+- Fix a Unicode boundary case that could duplicate an earlier readable preview segment; retain complete source and selected-view Copy.
+- Expose complete edit details and read range metadata (including zero) in Raw, serialized only when selected rather than while building the default preview.
+- Bound Exa/GitHub summary normalization before scanning large inputs, reusing the existing header helper. An all-whitespace prefix may omit the header summary; full input remains in details.
+- Delete unreachable legacy output parsers and their obsolete tests; keep active recognition/summary behavior and add actual detail-source fidelity coverage.
+- Avoid retaining a full classified diff array just to count changes; memoize selected Raw serialization so Copy/Show all do not repeatedly serialize large source details.
+- 217 tests pass. The initial 213-case review suite reproduced 14 failures against the previous runtime; further regressions caught repeated Raw serialization and stripped blank context before fixes. Production-component browser checks cover dark/light, narrow layout, Raw/Copy, streaming, diff colors and preview boundaries; no native-mobile or latency benchmark claim.
+
+## 0.1.0-beta.2
+
+- Recognize only explicitly marked Pi Code-mode `exec_command` result wrappers and expand one output layer.
+- Recognize the DSH-projected ACP `content[]` wrapper's explicit `type: "content"` / nested text blocks one layer, while keeping non-text blocks in Raw.
+- Keep script, exit-code, running-session, empty-output, error and upstream-truncation status visible while preserving the complete wrapper in Raw.
+- Render mixed content blocks with per-segment languages under one shared 20-line / 4,000-character preview budget; unknown blocks remain available in Raw.
+- Add synthetic shared and renderer regressions for ACP mixed blocks/shared preview limits, malformed/large data, multiple results, lazy metadata/image tails, streaming disclosure and selected-view Copy.
+- Preserve important script errors even when another status is present; report upstream truncation before malformed literal fallback without repairing it or repeating the warning.
+- Keep segmented status spacing compact instead of mounting newline-only text boxes. Refresh synthetic screenshots and verify the production renderer in wide/narrow, dark/light browser layouts.
+- 202 tests; read-only replay of 582 recent tool outputs checked shared preview bounds, no formatter exceptions and source immutability. No personal payloads were published.
+
+## 0.1.0-beta.1
+
+Initial public release of Readable Agent Activity, an MIT fork of Colorful Agent Activity.
+
+- Quiet icons and bounded single-line summaries.
+- Literal JavaScript inputs and lexical JSON formatting, including JSON inside text blocks.
+- Readable typed tool-result content; one-layer UI label decoding and repeated-path compaction.
+- 20-line / 4,000-character previews, manual Show all/Show less, full selected-view Copy and complete Raw.
+- Defensive malformed/large data handling and stable manual disclosure through streaming.
+- Explicit Full detail-only compatibility warning for Paseo 0.8.0.
+- 187 regression tests, pinned Apache-2.0 host projection fixtures, synthetic screenshots and CI.
+
+**Beta limitations:** Summary unsupported; all connected clients must use Full detail. Native mobile is untested. Full Show all/Raw/Copy can remain expensive.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Matt Cowger
+
+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/OVERVIEW.md

@@ -0,0 +1,7 @@
+Readable Agent Activity replaces Paseo's tool-call rows with expandable cards that show Input and Output as formatted, syntax-highlighted JSON, and gives Thinking rows a matching compact header. Long output is previewed at twenty lines, with Show all to expand it. Messages, approvals and the composer stay native.
+
+Use the cards with Full detail. They bypass Summary grouping, so before switching to Summary, run "Activity: use native tool rows (for Summary)" from the Command Center on that client, and "Activity: use tool cards (Full detail)" to switch back. The choice applies to that client only and resets to cards whenever the plugin reloads. On Paseo 0.8, cards shown in Summary can hide the native group entry.
+
+The plugin runs entirely on the client and reformats data Paseo already received, without summarizing or rebuilding diffs. It has no network, filesystem, process or daemon-side behavior. Show all on a very large payload can be slow.
+
+Do not enable it next to another plugin that replaces tool-call or Thinking timeline items. It requires Paseo 0.8.0 or later. Its automated checks pass with the Paseo 0.11.2 SDK, and it was last exercised live on a 0.10.1 daemon in the hosted web client. The Paseo desktop app and native iOS and Android are untested. It is a fork of Matt Cowger's Colorful Agent Activity.

package/README.md

@@ -1,3 +1,179 @@
-# Temporary Holding Version
+# Readable Agent Activity
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Formatted, highlighted tool-call JSON. Twenty-line previews. Recognizable tool icons.**
+
+**Version 0.1.0-beta.11** · [Release notes](CHANGELOG.md) · Paseo 0.8 or later, checked through SDK 0.11.4. Tool cards need Full detail;
+a Command Center action switches to native tool rows for Summary.
+
+## What it does
+
+- One **Input / Output** view for ordinary tools and codex-conversion.
+- Format and syntax-highlight JSON. Non-JSON text stays readable; source-only
+  JavaScript inputs render in place.
+- Preview at most **20 displayed lines per section**, including automatic wrapping. One **Show all / Show less**
+  control expands or collapses both sections. No Raw/Copy toolbar or extra explanations.
+- Keep tool-specific icons and the host's running/failed/canceled status.
+- Show the call's own main argument after the tool name on the collapsed header,
+  such as the shell command or file path: one literal value, first line only, in
+  muted monospace. It gives way before the tool name on narrow layouts.
+- Keep expansion manual through streaming and theme updates. Text is selectable
+  with real newline characters for normal device copying.
+
+Thinking uses a minimal matching foldable header to keep alternating tool/Thinking
+rows compact. Its body is selectable original text, with twenty-line preview and
+Show all, **without Markdown interpretation**. Messages, approvals and the composer
+stay native. The plugin does not generate summaries, infer nested calls, rebuild
+diffs or add settings screens.
+
+## Before and after
+
+Each pair uses **the same synthetic input and output**: original Paseo 0.8.0 reference
+on the left, this plugin on the right. These are real renderer components in a browser
+preview, not app/device captures. [Screenshot provenance and limits](docs/screenshots.md).
+
+### Formatted, highlighted JSON
+
+A serialized JSON result becomes an indented, colored structure.
+
+![Original Paseo JSON output versus Activity's formatted and highlighted JSON](images/01-json-comparison.png)
+
+### Source code without the JSON wrapper
+
+A source-only exec input displays as code; a pure text result displays its JSON content.
+Extra metadata and attachment fields are preserved when present.
+
+![Original exec input and output wrappers versus Activity's code and JSON view](images/02-code-comparison.png)
+
+### Twenty-line preview for long output
+
+Non-JSON output stays plain text. Activity shows the first twenty lines and offers
+one Show all for the complete result; wrapped long lines are bounded too.
+
+![The same sixty-line output in original Paseo and Activity's twenty-line preview](images/03-preview-comparison.png)
+
+## Data and limits
+
+JSON strings are formatted by changing whitespace only: number spellings, duplicate
+keys, key order and escapes remain intact. Structured objects are already decoded data.
+
+Only a source-only code input and a pure single-text content envelope are unwrapped.
+Extra input parameters, metadata, traces, unknown blocks and attachment data remain
+visible in the formatted JSON. Arbitrary nested strings are not recursively decoded.
+Native typed details receive a thin Input/Output adaptation; supplied edit fields
+are retained, not replaced with a reconstructed diff.
+
+**Show all displays the complete received representation**, not an inferred summary.
+It cannot restore data already omitted upstream. The preview first takes twenty source
+lines, then clips wrapping to twenty line-heights. It is not independently scrollable;
+Show all removes both limits. There is no additional 4,000-character preview cap.
+
+Formatting work is capped at 1,000,000 input/output characters, with bounded indentation;
+larger or malformed text remains intact as literal text. Highlighting is capped at
+100,000 characters. Source serialization, long-line layout and Show all can still be expensive for
+large payloads, particularly a single very long line. This is not a zero-lag guarantee.
+Virtual-list remounts reset local disclosure state.
+
+[Conversion compatibility](docs/conversion-compatibility.md) · [Verification](docs/verification.md)
+
+## Compatibility
+
+**Paseo 0.8.0 or later · tool cards need Full detail · experimental beta.**
+Beta.9 passes its checks with SDK 0.9.2, 0.10.1 and 0.11.2 and pinned 0.8.0/0.9.2 host
+fixtures. No live 0.11 daemon was tested. Beta.8 rendered live on a 0.10.0-beta.1 daemon in the hosted web client with
+Full detail. The manifest sets
+only a minimum, `>=0.8.0`, as Paseo recommends; later releases are not tested.
+
+Paseo 0.8 groups Summary calls before running plugin transformers. Its public API
+exposes neither the display mode nor group members. An enabled replacement can
+hide the native group's entry point; this plugin cannot automatically fall back.
+
+Paseo 0.9 and 0.10.0-beta.1 transform each original call **before** Summary grouping.
+All calls now remain visible, but plugin cards bypass grouping. Native plan/approval
+tools pass through, preserving host suppression and expandable plan cards. No
+display-mode API is available in any tested version, so the plugin cannot switch by itself.
+
+### Switching between cards and native rows
+
+Open the Command Center on the client you are using and choose:
+
+- **Activity: use native tool rows (for Summary)** before selecting Summary. Tool calls
+  return to native rows, so Summary groups them again; Thinking keeps its compact row.
+- **Activity: use tool cards (Full detail)** to restore the cards.
+
+The choice applies only to that client and is not saved: tool cards return whenever
+the plugin loads again, for example after an app reload. Switch each client separately.
+The plugin does not detect or change the host display preference and does not inspect
+private app state. With cards active, Summary shows every call ungrouped on 0.9+ and
+can hide the group entry on 0.8. Do not enable two plugins replacing the same
+tool-call timeline items.
+
+Pinned 0.9.2 host-pipeline tests show that native rows regroup existing history and
+that cards come back ungrouped. On a live 0.10.1 daemon in the hosted web client, the
+commands regrouped an existing conversation in Summary and restored the cards.
+0.8 re-rendering after a switch is untested; reload the conversation if rows do not
+change. Hermes engine tests and compact browser previews are not on-device mobile
+UI tests. [Compatibility evidence](docs/compatibility.md).
+
+## Install and local development
+
+Plugins are **trusted, unsandboxed code**. This plugin is client-only and uses public
+SDK modules, React Native primitives and host theme colors. It has no runtime network,
+filesystem, process or daemon-side behavior. Contributions unregister on cleanup.
+
+On Paseo 0.11 or later, install the reviewed [registry](https://paseo.sh/plugins) entry on
+the intended daemon. Its registry ID is `geoqiao/agent-activity`; the installed plugin ID
+stays `readable-agent-activity`:
+
+```sh
+paseo plugin add geoqiao/agent-activity --host <your-host>
+```
+
+To install the published npm package directly:
+
+```sh
+paseo plugin add npm:paseo-readable-agent-activity@0.1.0-beta.11 --host <your-host>
+```
+
+Paseo installs the package's two runtime dependencies, `prism-react-renderer` and
+`@getpaseo/protocol`, from its `npm-shrinkwrap.json`; both are compiled into the
+client bundle. The package's manifest has no build steps. The `paseo-plugin.json` in
+the Git source keeps them: they install the development dependencies and run the checks.
+
+To install the pinned prerelease directly from Git instead:
+
+```sh
+paseo plugin add git:geoqiao/paseo-stuff:plugins/agent-activity --ref readable-agent-activity-v0.1.0-beta.11 --host <your-host>
+```
+
+Paseo 0.11 reads a bare `owner/name` source as a registry ID, so the `git:` prefix is
+required there. Paseo CLIs before 0.11 take the same Git source without the prefix.
+
+Installation enables the plugin with tool cards active. Review its source/trust
+requirements, then use Full detail or switch to native tool rows first. Do not create a duplicate installation. Existing installations
+may use a runtime alias such as `colorful-agent-activity`; manage that existing ID.
+[Repository migration notes](https://github.com/geoqiao/paseo-stuff/blob/main/MIGRATION.md).
+
+For local development, run from the plugin directory (Node.js 22+):
+
+```sh
+npm ci --ignore-scripts --legacy-peer-deps --no-audit --no-fund
+npm run check
+# Only if the existing installation is enabled:
+paseo plugin reload <existing-runtime-id> --host <your-host>
+paseo plugin ls --host <your-host>
+```
+
+Preserve disabled installations; do not auto-enable them. No daemon restart is needed.
+Tests cover formatter fidelity, malformed/large data, complete output, text selection,
+manual disclosure, streaming, icons, theme colors, the Hermes bundle and pinned host
+projection. Native iOS/Android UI and the complete reconnect matrix remain unverified.
+
+## Credits
+
+An MIT fork of Matt Cowger's [Colorful Agent Activity](https://github.com/mcowger/paseo-plugins/tree/91058be73840ae11b130b6bb7d34b07652462217/colorful-agent-activity).
+Original copyright retained: [LICENSE](LICENSE), [provenance](UPSTREAM.md).
+Vendored Paseo test fixtures retain their separate Apache-2.0 license.
+
+The three comparison images show beta.6. Earlier screenshots remain in historical release tags.
+Published on npm as `paseo-readable-agent-activity` from 0.1.0-beta.11.
+[paseo.cafe submission and migration status](docs/catalog.md).

package/UPSTREAM.md

@@ -0,0 +1,31 @@
+# Upstream provenance
+
+## Plugin
+
+- Repository: https://github.com/mcowger/paseo-plugins
+- Commit: `91058be73840ae11b130b6bb7d34b07652462217`
+- Subdirectory: `colorful-agent-activity`
+- License: MIT, Copyright (c) 2026 Matt Cowger; original LICENSE retained.
+- Imported from an installed local checkout, not a fresh upstream snapshot.
+- Local changes already present at import: tools/reasoning default collapsed, manual-only expansion during streaming, React renderer regression tests (44 total tests), documentation and development-only test dependencies.
+
+This fork publishes under the distinct manifest ID **readable-agent-activity**. Existing local installations may retain an explicit runtime alias; internal renderer kind strings remain unchanged. Do not enable this fork and another timeline-replacement plugin together.
+
+## Changes in this fork
+
+- Beta.6: one Input/Output formatter, twenty-line previews, a shared Show all, source-preserving JSON highlighting and tool icons.
+- Manual-only expansion; minimal plain-text Thinking disclosure matches tool-row density. Messages remain native. The old Markdown reasoning parser is not restored.
+- Thin source/text transport adaptation retains metadata, traces, attachments and native detail fields. Malformed and oversized text falls back without silent truncation.
+- Earlier betas included summaries, reconstructed diffs, UI-label compaction and Raw/Copy controls. Those helpers and their obsolete tests are removed in beta.6, not retained behind hidden UI.
+- No server entry; presentation uses public SDK modules and does not need daemon-side privileges.
+- Additional pure/renderer tests and pinned host compatibility fixtures. Full detail only; Summary remains unsupported.
+
+Public screenshots are captured from synthetic data, not personal conversations. Their
+left columns use a source-adapted Paseo native reference, not the upstream Activity
+plugin. See [screenshot provenance](docs/screenshots.md) for exact source and limitations.
+
+## Host test fixtures
+
+Four unmodified Paseo v0.8.0 source files from commit `b8e24677e12b226c7c38c1c3a40649daa9f1152f`, under Apache-2.0, are used only in tests. Their license is not replaced by the plugin's MIT license.
+
+See [fixture provenance](tests/fixtures/paseo-0.8/README.md) and [fixture LICENSE](tests/fixtures/paseo-0.8/LICENSE).

package/client/activity.tsx

@@ -0,0 +1,173 @@
+import type { PluginTimelineItemProps } from "@getpaseo/plugin/client";
+import { Icon, ScrollView } from "@getpaseo/plugin/client/react-native";
+import { Fragment, useMemo, useState, type ReactNode } from "react";
+import { ActivityIndicator, Platform, Pressable, Text, View, useWindowDimensions, type TextStyle, type ViewStyle } from "react-native";
+import { detailSections, presentValue, previewText, PREVIEW_LINES } from "../shared/details";
+import { toolArgument } from "../shared/presentation";
+import type { ReasoningItemData, ToolCallItemData } from "../shared/timeline";
+import { useSyntaxTokens } from "./highlight";
+
+type Theme = PluginTimelineItemProps["theme"];
+type Layout = PluginTimelineItemProps["layout"];
+
+function useStyles(theme: Theme, layout: Layout) {
+  return useMemo(() => {
+    const { colors } = theme;
+    return {
+      row: { minWidth: 0 } satisfies ViewStyle,
+      // Native 0.8 labels use 14px with natural leading on every platform.
+      // Host plugin rows already add 16px between cards: don't add a mobile
+      // 44px minimum on top. Let larger system text grow the header naturally.
+      header: { flexDirection: "row", alignItems: "center", gap: 8, minWidth: 0,
+        minHeight: 16, paddingHorizontal: 2,
+        paddingVertical: 0, borderRadius: 4 } satisfies ViewStyle,
+      title: { color: colors.foreground, fontSize: 14,
+        flexShrink: 1, minWidth: 0 } satisfies TextStyle,
+      // The argument gives way first, so a long command never hides the tool name.
+      argument: { color: colors.foregroundMuted, fontFamily: "monospace", fontSize: 12,
+        flex: 1, flexShrink: 100, minWidth: 0 } satisfies TextStyle,
+      body: { marginLeft: 20, paddingTop: 4, paddingBottom: 8, gap: 12, minWidth: 0 } satisfies ViewStyle,
+      section: { gap: 5, minWidth: 0 } satisfies ViewStyle,
+      label: { color: colors.foregroundMuted, fontSize: 11, lineHeight: 18 } satisfies TextStyle,
+      status: { color: colors.foregroundMuted, fontSize: 11 } satisfies TextStyle,
+      action: { alignSelf: "flex-start", paddingHorizontal: 5,
+        minHeight: layout.compact ? 44 : 24, paddingVertical: layout.compact ? 12 : 3, borderRadius: 3 } satisfies ViewStyle,
+      code: { backgroundColor: colors.surface1, padding: 10, borderRadius: 4, minWidth: "100%" } satisfies ViewStyle,
+      codeText: { color: colors.foreground, fontFamily: "monospace", fontSize: 12, lineHeight: 19 } satisfies TextStyle,
+    };
+  }, [theme, layout.compact]);
+}
+type Styles = ReturnType<typeof useStyles>;
+
+function Button({ label, children, onPress, theme, style, expanded }: {
+  label: string; children: ReactNode; onPress: () => void; theme: Theme; style: ViewStyle; expanded: boolean;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  return <Pressable accessibilityRole="button" accessibilityLabel={label}
+    accessibilityState={{ expanded }} onPress={onPress}
+    onHoverIn={() => setHovered(true)} onHoverOut={() => setHovered(false)}
+    onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
+    style={({ pressed }) => [style, (hovered || pressed) && { backgroundColor: theme.colors.surface1 },
+      focused && { outlineColor: theme.colors.accent, outlineWidth: 1, outlineStyle: "solid" }]}>
+    {children}
+  </Pressable>;
+}
+
+/** Measure natural content, but don't let the preview become a nested scroll owner. */
+function Preview({ all, lineHeight, onOverflow, children }: {
+  all: boolean; lineHeight: number; onOverflow: (overflow: boolean) => void; children: ReactNode;
+}) {
+  const { fontScale } = useWindowDimensions();
+  const maxHeight = PREVIEW_LINES * lineHeight * fontScale;
+  // RN Web's scrollEnabled=false also cancels ancestor wheel/touch gestures.
+  // Hidden overflow prevents web scrolling without intercepting the host scroll.
+  return all ? children : <ScrollView scrollEnabled={Platform.OS === "web"}
+    showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false}
+    style={{ maxHeight, flexGrow: 0, overflow: "hidden" }}
+    onContentSizeChange={(_width, height) => onOverflow(height > maxHeight + 0.5)}>
+    {children}
+  </ScrollView>;
+}
+
+function CodeContent({ text, language, theme, styles, all, onOverflow }: {
+  text: string; language: string; theme: Theme; styles: Styles;
+  all: boolean; onOverflow: (overflow: boolean) => void;
+}) {
+  const tokens = useSyntaxTokens(text, language, theme.colors);
+  const wrap = language === "text" || language === "json";
+  const content = <View style={[styles.code, wrap && { minWidth: 0, width: "100%" }]}>
+    {/* One selectable text, including real newline characters, keeps copying faithful. */}
+    <Preview all={all} lineHeight={styles.codeText.lineHeight} onOverflow={onOverflow}>
+      <Text selectable style={styles.codeText}>
+        {tokens ? tokens.map((line, index) => <Fragment key={index}>
+          {index > 0 ? "\n" : null}
+          {line.map((token, tokenIndex) => <Text key={tokenIndex}
+            style={{ color: token.color ?? theme.colors.foreground }}>{token.content}</Text>)}
+        </Fragment>) : text}
+      </Text>
+    </Preview>
+  </View>;
+  return wrap ? content : <ScrollView horizontal nestedScrollEnabled
+    contentContainerStyle={{ flexGrow: 1 }}>{content}</ScrollView>;
+}
+
+function Details({ data, all, toggleAll, theme, styles }: {
+  data: ToolCallItemData; all: boolean; toggleAll: () => void; theme: Theme; styles: Styles;
+}) {
+  const [inputOverflow, setInputOverflow] = useState(false);
+  const [outputOverflow, setOutputOverflow] = useState(false);
+  const sections = useMemo(() => detailSections(data).map(section => {
+    const full = presentValue(section.value, section.language);
+    return { ...section, full, preview: previewText(full.text) };
+  }), [data]);
+  return <View style={styles.body}>
+    {sections.map(section => <View key={section.label} style={styles.section}>
+      <Text style={styles.label}>{section.label}</Text>
+      {section.full.text === "" ? <Text style={styles.label}>
+        {data.status === "running" && section.label === "Output" && section.value === undefined
+          ? "Waiting for output…" : "Empty"}
+      </Text> : <CodeContent text={all ? section.full.text : section.preview.text}
+        language={section.full.language} theme={theme} styles={styles} all={all}
+        onOverflow={section.label === "Input" ? setInputOverflow : setOutputOverflow} />}
+    </View>)}
+    {all || sections.some(section => section.preview.truncated || (section.full.text !== ""
+      && (section.label === "Input" ? inputOverflow : outputOverflow))) ? <Button
+      label={all ? "Show less" : "Show all"} expanded={all} onPress={toggleAll}
+      theme={theme} style={styles.action}><Text style={styles.label}>{all ? "Show less" : "Show all"}</Text></Button> : null}
+  </View>;
+}
+
+export function ToolActivity({ item, theme, layout }: PluginTimelineItemProps<ToolCallItemData>) {
+  const styles = useStyles(theme, layout);
+  const [expanded, setExpanded] = useState(false);
+  const [all, setAll] = useState(false);
+  const data = item.data;
+  const argument = useMemo(() => toolArgument(data.detail), [data.detail]);
+  return <View style={styles.row}>
+    <Button label={(expanded ? "Collapse " : "Expand ") + data.name} expanded={expanded}
+      onPress={() => setExpanded(value => !value)} theme={theme} style={styles.header}>
+      <Icon name={data.presentation.icon} size={12} color={theme.colors.foregroundMuted} />
+      <Text numberOfLines={1} style={styles.title}>{data.name}</Text>
+      {argument ? <Text numberOfLines={1} style={styles.argument}>{argument}</Text> : <View style={{ flex: 1 }} />}
+      {data.status === "running" ? <ActivityIndicator accessibilityLabel="Running"
+        color={theme.colors.foregroundMuted} size="small"
+        style={{ width: 14, height: 14, transform: [{ scale: 0.65 }] }} />
+        : data.status === "failed" ? <Text style={[styles.status, { color: theme.colors.statusDanger }]}>Failed</Text>
+        : data.status === "canceled" ? <Text style={styles.status}>Canceled</Text> : null}
+    </Button>
+    {expanded ? <Details data={data} all={all} toggleAll={() => setAll(value => !value)}
+      theme={theme} styles={styles} /> : null}
+  </View>;
+}
+
+/** Minimal density adapter, not the former Markdown/reasoning presentation. */
+export function ReasoningActivity({ item, theme, layout }: PluginTimelineItemProps<ReasoningItemData>) {
+  const styles = useStyles(theme, layout);
+  const [expanded, setExpanded] = useState(false);
+  const [all, setAll] = useState(false);
+  const [overflow, setOverflow] = useState(false);
+  const preview = expanded && !all ? previewText(item.data.text) : { text: "", truncated: false };
+  return <View style={styles.row}>
+    <Button label={expanded ? "Collapse Thinking" : "Expand Thinking"} expanded={expanded}
+      onPress={() => setExpanded(value => !value)} theme={theme} style={styles.header}>
+      <Icon name="Brain" size={12} color={theme.colors.foregroundMuted} />
+      <Text numberOfLines={1} style={[styles.title, { color: theme.colors.foregroundMuted }]}>Thinking</Text>
+      <View style={{ flex: 1 }} />
+      {item.data.phase === "streaming" ? <ActivityIndicator accessibilityLabel="Running"
+        color={theme.colors.foregroundMuted} size="small"
+        style={{ width: 14, height: 14, transform: [{ scale: 0.65 }] }} /> : null}
+    </Button>
+    {expanded ? <View style={styles.body}>
+      <Preview all={all} lineHeight={20} onOverflow={setOverflow}>
+        <Text selectable style={{ color: theme.colors.foreground, fontSize: 13, lineHeight: 20 }}>
+          {all ? item.data.text : preview.text}
+        </Text>
+      </Preview>
+      {all || preview.truncated || (item.data.text !== "" && overflow) ? <Button label={all ? "Show less" : "Show all"} expanded={all}
+        onPress={() => setAll(value => !value)} theme={theme} style={styles.action}>
+        <Text style={styles.label}>{all ? "Show less" : "Show all"}</Text>
+      </Button> : null}
+    </View> : null}
+  </View>;
+}

package/client/highlight.ts

@@ -0,0 +1,108 @@
+// Use the ESM distribution: Paseo's neutral bundler ignores main/module fields,
+// and its eager CJS interop would snapshot Prism before CJS initialization.
+import { Prism } from "prism-react-renderer/dist/index.mjs";
+import { useEffect, useState } from "react";
+
+export interface SyntaxColors {
+  foreground: string;
+  foregroundMuted: string;
+  accent: string;
+  surface1: string;
+  statusSuccess?: string;
+  statusWarning?: string;
+}
+export interface SyntaxToken {
+  content: string;
+  color?: string;
+}
+export const MAX_HIGHLIGHT_CHARS = 100_000;
+// This vendored Prism instance has no global registration or automatic DOM scan.
+// Use tokenize only, never its HTML/React renderer. Its function-based runtime
+// also works in Hermes when Paseo evaluates the bundle without Metro transforms.
+// Bash is not bundled by prism-react-renderer; this deliberately small grammar
+// colors shell strings/comments/control words without claiming full shell parsing.
+Prism.languages.bash = {
+  comment: { pattern: /(^|[\t ])#.*/m, lookbehind: true, greedy: true },
+  string: { pattern: /"(?:\\[\s\S]|[^"\\])*"|'[^']*'/, greedy: true },
+  variable: /\$(?:\w+|\{[^}\r\n]*\}|[?$!#@*-])/,
+  keyword: /\b(?:if|then|else|elif|fi|for|while|until|do|done|case|esac|in|function|select|return|export|local)\b/,
+  operator: /&&|\|\||[|&;<>]/,
+  punctuation: /[(){}[\]]/,
+};
+const supported = new Set(["bash", "css", "go", "html", "javascript", "json", "markdown", "python", "rust", "typescript", "yaml", "jsx", "tsx"]);
+const tokensCache = new Map<string, { size: number; tokens: SyntaxToken[][] }>();
+let cachedChars = 0;
+
+export function syntaxKey(colors: SyntaxColors): string {
+  return [colors.foreground, colors.foregroundMuted, colors.accent, colors.surface1, colors.statusSuccess, colors.statusWarning].join("|");
+}
+function tokenLines(stream: Prism.TokenStream, colors: SyntaxColors, json: boolean): SyntaxToken[][] {
+  const lines: SyntaxToken[][] = [[]];
+  function visit(value: Prism.TokenStream, color: string): void {
+    if (typeof value === "string") {
+      const parts = value.split("\n");
+      for (let index = 0; index < parts.length; index++) {
+        if (index) lines.push([]);
+        if (parts[index]) lines[lines.length - 1]!.push({ content: parts[index]!, color });
+      }
+    } else if (Array.isArray(value)) {
+      for (const child of value) visit(child, color);
+    } else {
+      const types = [value.type, ...typeof value.alias === "string" ? [value.alias] : value.alias ?? []];
+      // Accent is a control/background color in some host themes (including a
+      // dark green shared by light and dark Paseo). Keys need foreground contrast.
+      const nextColor = json && types.includes("property") ? colors.foreground
+        : json && types.includes("string") ? colors.statusSuccess ?? colors.accent
+        : json && types.some(type => ["number", "boolean", "null"].includes(type)) ? colors.statusWarning ?? colors.accent
+        : types.some((type) => ["comment", "punctuation", "operator"].includes(type))
+        ? colors.foregroundMuted
+        : types.some((type) => ["string", "char", "keyword", "template-string"].includes(type))
+          ? colors.accent : color;
+      visit(value.content, nextColor);
+    }
+  }
+  visit(stream, colors.foreground);
+  return lines;
+}
+function normalizeLanguage(language: string): string {
+  const normalized = language.toLowerCase().trim();
+  const aliases: Record<string, string> = { sh: "bash", shell: "bash", shellscript: "bash", js: "javascript", ts: "typescript", yml: "yaml", md: "markdown", py: "python", rs: "rust" };
+  return Object.prototype.hasOwnProperty.call(aliases, normalized) ? aliases[normalized]! : normalized;
+}
+export async function highlightCode(code: string, language: string, colors: SyntaxColors): Promise<SyntaxToken[][] | null> {
+  const lang = normalizeLanguage(language);
+  if (!code || code.length > MAX_HIGHLIGHT_CHARS || !supported.has(lang)) return null;
+  const key = syntaxKey(colors) + ":" + lang + ":" + code;
+  const cached = tokensCache.get(key);
+  if (cached) {
+    tokensCache.delete(key);
+    tokensCache.set(key, cached);
+    return cached.tokens;
+  }
+  try {
+    const tokens = tokenLines(Prism.tokenize(code, Prism.languages[lang]!), colors, lang === "json");
+    tokensCache.set(key, { size: code.length, tokens });
+    cachedChars += code.length;
+    while (tokensCache.size > 40 || cachedChars > 500_000) {
+      const oldest = tokensCache.keys().next().value!;
+      cachedChars -= tokensCache.get(oldest)!.size;
+      tokensCache.delete(oldest);
+    }
+    return tokens;
+  } catch {
+    return null;
+  }
+}
+export function useSyntaxTokens(code: string, language: string, colors: SyntaxColors): SyntaxToken[][] | null {
+  const key = syntaxKey(colors);
+  const [result, setResult] = useState<{ code: string; language: string; key: string; tokens: SyntaxToken[][] | null }>();
+  useEffect(() => {
+    let cancelled = false;
+    void highlightCode(code, language, colors).then((tokens) => {
+      if (!cancelled) setResult({ code, language, key, tokens });
+    });
+    return () => { cancelled = true; };
+  }, [code, language, key]);
+  // Never display tokens from a previous streaming value or theme, even for one render.
+  return result?.code === code && result.language === language && result.key === key ? result.tokens : null;
+}

package/client/transform.ts

@@ -0,0 +1,26 @@
+import type { PluginTimelineTransformerContribution } from "@getpaseo/plugin/client";
+import { createToolCallData, TOOL_CALL_RENDERER_KIND, TOOL_CALL_RENDERER_VERSION,
+  REASONING_RENDERER_KIND, REASONING_RENDERER_VERSION } from "../shared/timeline";
+
+// Density-only exception: retain exact thought text, without Markdown rewriting.
+export const transformReasoning: PluginTimelineTransformerContribution<"reasoning">["transform"] = ({ item, phase }) => ({
+  items: [{ type: "plugin", kind: REASONING_RENDERER_KIND, version: REASONING_RENDERER_VERSION,
+    data: { text: item.text, phase } }],
+});
+
+export const transformToolCall: PluginTimelineTransformerContribution<"tool_call">["transform"] = ({ item }) => {
+  // 0.9/0.10 beta transform before native plan suppression/presentation. Keep approval
+  // tools and structured plans native, including rejected/completed plans.
+  if (item.name === "ExitPlanMode" || item.name === "plan_approval" || item.detail?.type === "plan") return undefined;
+  // This exact shape is a native SpeakMessage, not an ordinary tool card.
+  if (item.name === "speak" && item.detail?.type === "unknown"
+    && typeof item.detail.input === "string" && item.detail.input.trim()) return undefined;
+  return {
+    items: [{
+      type: "plugin",
+      kind: TOOL_CALL_RENDERER_KIND,
+      version: TOOL_CALL_RENDERER_VERSION,
+      data: createToolCallData(item),
+    }],
+  };
+};

package/index.client.tsx

@@ -0,0 +1,35 @@
+import type { PluginClientContext } from "@getpaseo/plugin/client";
+import { ReasoningActivity, ToolActivity } from "./client/activity";
+import { transformReasoning, transformToolCall } from "./client/transform";
+import { TOOL_CALL_RENDERER_KIND, TOOL_CALL_RENDERER_VERSION, toolCallItemDataSchema,
+  REASONING_RENDERER_KIND, REASONING_RENDERER_VERSION, reasoningItemDataSchema } from "./shared/timeline";
+
+export default function contribute(client: PluginClientContext) {
+  // Paseo 0.8 to 0.10 expose no public display-mode/group context, so cards bypass Summary
+  // grouping. Never change the host preference or guess it from private app state; the user
+  // switches this client to native tool rows instead. Reasoning rows never join tool groups,
+  // so the Thinking adapter stays. The choice is client-local and resets on reload.
+  let removeToolCards: (() => void) | undefined;
+  function useCards() {
+    removeToolCards ??= client.addTimelineTransformer({ id: "tool-calls", query: { itemType: "tool_call" }, transform: transformToolCall });
+  }
+  function useNativeRows() {
+    removeToolCards?.();
+    removeToolCards = undefined;
+  }
+  const remove = [
+    client.addTimelineRenderer({ kind: TOOL_CALL_RENDERER_KIND, version: TOOL_CALL_RENDERER_VERSION, schema: toolCallItemDataSchema, Component: ToolActivity }),
+    client.addTimelineTransformer({ id: "reasoning", query: { itemType: "reasoning" }, transform: transformReasoning }),
+    client.addTimelineRenderer({ kind: REASONING_RENDERER_KIND, version: REASONING_RENDERER_VERSION, schema: reasoningItemDataSchema, Component: ReasoningActivity }),
+    client.addCommandCenterItem({
+      id: "native-tool-rows", title: "Activity: use native tool rows (for Summary)", icon: "List", context: "global",
+      keywords: ["activity", "summary", "tool", "native"], onSelect: useNativeRows,
+    }),
+    client.addCommandCenterItem({
+      id: "tool-cards", title: "Activity: use tool cards (Full detail)", icon: "LayoutList", context: "global",
+      keywords: ["activity", "full detail", "tool", "cards"], onSelect: useCards,
+    }),
+  ];
+  useCards();
+  return () => { useNativeRows(); for (const cleanup of remove.reverse()) cleanup(); };
+}

package/npm-shrinkwrap.json

@@ -0,0 +1,75 @@
+{
+  "name": "paseo-readable-agent-activity",
+  "version": "0.1.0-beta.11",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "paseo-readable-agent-activity",
+      "version": "0.1.0-beta.11",
+      "license": "MIT",
+      "dependencies": {
+        "@getpaseo/protocol": "0.9.2",
+        "prism-react-renderer": "2.4.1"
+      }
+    },
+    "node_modules/@getpaseo/protocol": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@getpaseo/protocol/-/protocol-0.9.2.tgz",
+      "integrity": "sha512-CGfyfqOVNxETLCgVhQGeaP6PtP17FvP5wBuRxmVQ+WIw3F/qCNju/a5aSDF+vbh+62Qf2qtha9MpQB9DrVJehA==",
+      "dependencies": {
+        "semver": "^7.8.5",
+        "zod": "^4.4.3"
+      }
+    },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.6",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.6.tgz",
+      "integrity": "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==",
+      "license": "MIT"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/prism-react-renderer": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz",
+      "integrity": "sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/prismjs": "^1.26.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.6.1.tgz",
+      "integrity": "sha512-341aRWQsve0rvronKNTqZpjmzdbUDlFuzHaI/XLg/Ej82qffDJRRfBTCuv7+9q/rMjB6LSLyEBnW4InJeMtt/Q==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "paseo-readable-agent-activity",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-beta.11",
+  "description": "Formatted and highlighted tool-call JSON, twenty-line previews, tool icons and the main argument on collapsed cards, for Paseo 0.8 or later. Tool cards need Full detail.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/geoqiao/paseo-stuff.git",
+    "directory": "plugins/agent-activity"
+  },
+  "homepage": "https://github.com/geoqiao/paseo-stuff/tree/main/plugins/agent-activity#readme",
+  "bugs": {
+    "url": "https://github.com/geoqiao/paseo-stuff/issues"
+  },
+  "keywords": [
+    "paseo",
+    "paseo-plugin",
+    "tool-calls",
+    "json",
+    "readability"
+  ],
+  "files": [
+    "paseo-plugin.json",
+    "OVERVIEW.md",
+    "index.client.tsx",
+    "client/activity.tsx",
+    "client/highlight.ts",
+    "client/transform.ts",
+    "shared/details.ts",
+    "shared/presentation.ts",
+    "shared/timeline.ts",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "UPSTREAM.md",
+    "images/",
+    "package.json",
+    "npm-shrinkwrap.json"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "@getpaseo/protocol": "0.9.2",
+    "prism-react-renderer": "2.4.1"
+  }
+}

package/paseo-plugin.json

@@ -0,0 +1,6 @@
+{
+  "id": "readable-agent-activity",
+  "requirements": {
+    "paseo": ">=0.8.0"
+  }
+}

package/shared/details.ts

@@ -0,0 +1,144 @@
+import type { ToolCallItemData } from "./timeline";
+
+export const PREVIEW_LINES = 20;
+export const MAX_FORMAT_CHARS = 1_000_000;
+
+export interface DisplayValue {
+  text: string;
+  language: string;
+}
+export interface DetailSection {
+  label: "Input" | "Output";
+  value: unknown;
+  language?: string;
+}
+
+function record(value: unknown): Record<string, unknown> | undefined {
+  return value !== null && typeof value === "object" && !Array.isArray(value)
+    ? value as Record<string, unknown> : undefined;
+}
+
+/** Whitespace only: retain numeric lexemes, duplicate keys, order and escapes. */
+export function prettyJson(source: string): string | null {
+  if (!source.trim() || source.length > MAX_FORMAT_CHARS) return null;
+  try { JSON.parse(source); } catch { return null; }
+  const tokens = source.match(/"(?:\\[\s\S]|[^"\\])*"|[{}[\],:]|[^\s{}[\],:]+/g) ?? [];
+  const out: string[] = [];
+  let depth = 0, length = 0;
+  const push = (text: string) => { out.push(text); length += text.length; };
+  const line = () => push("\n" + "  ".repeat(Math.min(depth, 40)));
+  for (let index = 0; index < tokens.length; index++) {
+    const token = tokens[index]!;
+    if (token === "{" || token === "[") {
+      push(token); depth++;
+      if (tokens[index + 1] !== "}" && tokens[index + 1] !== "]") line();
+    } else if (token === "}" || token === "]") {
+      depth--;
+      if (tokens[index - 1] !== "{" && tokens[index - 1] !== "[") line();
+      push(token);
+    } else if (token === ",") { push(token); line(); }
+    else if (token === ":") push(": ");
+    else push(token);
+    // Bound indentation amplification; fall back to the intact original.
+    if (length > MAX_FORMAT_CHARS) return null;
+  }
+  return out.join("");
+}
+
+export function presentValue(value: unknown, language = "text"): DisplayValue {
+  if (value === undefined) return { text: "", language };
+  if (typeof value === "string") {
+    const formatted = prettyJson(value);
+    return { text: formatted ?? value, language: formatted !== null ? "json" : language };
+  }
+  try {
+    // Reuse the bounded whitespace formatter: JSON.stringify(value, null, 2)
+    // can amplify deeply nested objects into unbounded indentation.
+    const source = JSON.stringify(value) ?? "";
+    return { text: prettyJson(source) ?? source, language: "json" };
+  } catch {
+    return { text: String(value), language: "text" };
+  }
+}
+
+/** Bound the source prefix before layout; the renderer also bounds wrapped lines. */
+export function previewText(text: string): { text: string; truncated: boolean } {
+  let end = -1;
+  for (let line = 0; line < PREVIEW_LINES; line++) {
+    end = text.indexOf("\n", end + 1);
+    if (end === -1) return { text, truncated: false };
+  }
+  return { text: text.slice(0, end), truncated: true };
+}
+
+function onlyKeys(value: Record<string, unknown>, keys: string[]): boolean {
+  const actual = Object.keys(value);
+  return actual.length === keys.length && keys.every(key => Object.hasOwn(value, key));
+}
+
+/** Unwrap only a pure single-text transport. Never drop metadata or attachments.
+ * Serialized JSON strings stay strings: parsing/re-serializing could lose keys/numbers.
+ */
+function outputValue(value: unknown): unknown {
+  const envelope = record(value);
+  if (!envelope || !onlyKeys(envelope, ["content"]) || !Array.isArray(envelope.content)
+    || envelope.content.length !== 1) return value;
+  let block = record(envelope.content[0]);
+  if (block?.type === "content" && onlyKeys(block, ["type", "content"])) block = record(block.content);
+  return block?.type === "text" && onlyKeys(block, ["type", "text"]) && typeof block.text === "string"
+    ? block.text : value;
+}
+
+function inputSection(value: unknown, tool: string): DetailSection {
+  const name = tool.trim().toLowerCase().replace(/^(?:functions|tools)\./, "");
+  const codeTool = ["exec", "mcpscript", "mcp_script"].includes(name);
+  const input = record(value);
+  // A source-only wrapper is transparent; extra parameters remain structured JSON.
+  if (codeTool && input && onlyKeys(input, ["code"]) && typeof input.code === "string"
+    && input.code.trim()) return { label: "Input", value: input.code, language: "javascript" };
+  return { label: "Input", value, ...(codeTool && typeof value === "string" ? { language: "javascript" } : {}) };
+}
+
+function without(value: Record<string, unknown>, keys: string[]): Record<string, unknown> {
+  return Object.fromEntries(Object.entries(value).filter(([key]) => !keys.includes(key)));
+}
+
+/** Thin host-detail adaptation, not tool execution or semantic result interpretation. */
+export function detailSections(data: ToolCallItemData): DetailSection[] {
+  const detail = record(data.detail);
+  let input: unknown;
+  let output: unknown = data.detail;
+  if (detail) {
+    switch (detail.type) {
+      case "unknown": {
+        input = detail.input;
+        const extra = without(detail, ["type", "input", "output"]);
+        output = Object.keys(extra).length ? { ...extra, output: detail.output } : outputValue(detail.output);
+        break;
+      }
+      case "shell": {
+        input = { command: detail.command, ...(Object.hasOwn(detail, "cwd") ? { cwd: detail.cwd } : {}) };
+        const result = without(detail, ["type", "command", "cwd"]);
+        output = onlyKeys(result, ["output"]) ? result.output : result;
+        break;
+      }
+      case "read":
+        input = without(detail, ["type", "content"]);
+        output = detail.content;
+        break;
+      case "write":
+      case "edit":
+        input = without(detail, ["type"]);
+        output = undefined;
+        break;
+      case "plain_text":
+      case "plan": {
+        const result = without(detail, ["type"]);
+        output = onlyKeys(result, ["text"]) ? result.text : result;
+        break;
+      }
+    }
+  }
+  if (data.error !== undefined) output = { ...(output !== undefined ? { output } : {}), error: data.error };
+  return [inputSection(input, data.name), { label: "Output", value: output }];
+}

package/shared/presentation.ts

@@ -0,0 +1,141 @@
+import { getPaseoToolLeafName } from "@getpaseo/protocol/tool-name-normalization";
+
+export const PASEO_TOOL_ICONS: Readonly<Record<string, string>> = {
+  speak: "MicVocal",
+  create_workspace: "FolderPlus",
+  list_workspaces: "Folders",
+  archive_workspace: "Archive",
+  create_agent: "Bot",
+  send_agent_prompt: "Send",
+  get_agent_status: "Activity",
+  list_agents: "Users",
+  cancel_agent: "CircleStop",
+  archive_agent: "Archive",
+  kill_agent: "CircleX",
+  update_agent: "Settings2",
+  rename_workspace: "Pencil",
+  list_workspace_scripts: "ListTree",
+  start_workspace_script: "Play",
+  stop_workspace_script: "Square",
+  list_terminals: "SquareTerminal",
+  create_terminal: "SquareTerminal",
+  kill_terminal: "CircleX",
+  capture_terminal: "ScrollText",
+  send_terminal_keys: "Keyboard",
+  create_schedule: "CalendarClock",
+  create_heartbeat: "HeartPulse",
+  delete_heartbeat: "Trash2",
+  list_schedules: "CalendarDays",
+  inspect_schedule: "CalendarSearch",
+  pause_schedule: "Pause",
+  resume_schedule: "Play",
+  delete_schedule: "Trash2",
+  update_schedule: "CalendarCog",
+  schedule_logs: "ScrollText",
+  run_schedule_once: "CalendarCheck",
+  list_providers: "Network",
+  list_models: "Cpu",
+  list_profiles: "ContactRound",
+  inspect_provider: "ScanSearch",
+  get_agent_activity: "Activity",
+  set_agent_mode: "SlidersHorizontal",
+  list_pending_permissions: "ShieldAlert",
+  respond_to_permission: "ShieldCheck",
+  browser_list_tabs: "PanelsTopLeft",
+  browser_new_tab: "Globe2",
+  browser_snapshot: "Scan",
+  browser_click: "MousePointer2",
+  browser_fill: "TextCursorInput",
+  browser_wait: "Timer",
+  browser_type: "Keyboard",
+  browser_keypress: "KeyRound",
+  browser_navigate: "Navigation",
+  browser_back: "ArrowLeft",
+  browser_forward: "ArrowRight",
+  browser_reload: "RefreshCw",
+  browser_screenshot: "Camera",
+  browser_upload: "Upload",
+  browser_hover: "Hand",
+  browser_select: "ListFilter",
+  browser_drag: "Move",
+  browser_logs: "ScrollText",
+  browser_evaluate: "Braces",
+  browser_scroll: "Scroll",
+  browser_resize: "Maximize2",
+  browser_close_tab: "X",
+};
+
+
+const TOOL_ICONS: Readonly<Record<string, string>> = {
+  exec: "Code", mcpscript: "Code", mcp_script: "Code",
+  bash: "Terminal", shell: "Terminal", exec_command: "Terminal",
+  run_command: "Terminal", run_shell_command: "Terminal", write_stdin: "Keyboard",
+  wait: "Clock", read: "Eye", read_file: "Eye", write: "FilePen", write_file: "FilePen",
+  edit: "Pencil", edit_file: "Pencil", apply_patch: "FileDiff", view_image: "Image",
+  find_roots: "Monitor", observe_ui: "Eye", search_ui: "Search", inspect_ui: "Eye",
+  expand_ui: "List", read_text: "FileText", act_ui: "MousePointer", wait_for: "Clock",
+  launch_browser: "Globe", navigate_browser: "Globe", evaluate_browser: "Code",
+  fetch_content: "Globe", web_search: "Search", source_check: "SearchCheck",
+  get_search_content: "FileSearch", ask_user: "MessageSquare", mcp: "Plug",
+  speak: "MicVocal", task: "Bot", thinking: "Brain",
+  actions_get: "Workflow", actions_list: "ListChecks", actions_run_trigger: "PlayCircle",
+  get_file_contents: "FileCode2", get_job_logs: "ScrollText", pull_request_read: "GitPullRequest",
+  search_code: "Code2", search_repositories: "BookMarked",
+  web_search_exa: "Search", web_fetch_exa: "Globe", exa_agent_run: "Bot",
+  exa_read_agent_research_guide: "BookOpen", exa_read_agent_schema_templates: "Braces",
+};
+const DETAIL_ICONS: Readonly<Record<string, string>> = {
+  shell: "SquareTerminal", read: "Eye", write: "FilePen", edit: "Pencil",
+  worktree_setup: "GitBranch", search: "Search", fetch: "Globe",
+  sub_agent: "Bot", plain_text: "MessageSquare", plan: "ListChecks",
+};
+
+function lookup(map: Readonly<Record<string, string>>, key: string): string | undefined {
+  return Object.hasOwn(map, key) ? map[key] : undefined;
+}
+
+/** Name/category mapping only. Never inspect arguments or derive a business summary. */
+export function toolIcon(toolName: string, detail?: unknown): string {
+  const normalized = toolName.trim().toLowerCase().replace(/^(?:functions|tools)\./, "");
+  const paseo = getPaseoToolLeafName(normalized) ?? normalized.match(/^(?:mcp_)?paseo_(.+)$/)?.[1];
+  if (paseo) return lookup(PASEO_TOOL_ICONS, paseo) ?? "Sparkles";
+  const leaf = normalized.split(/__|[.:/]/).at(-1) ?? normalized;
+  const icon = lookup(TOOL_ICONS, leaf) ?? lookup(TOOL_ICONS, leaf.replace(/^github_/, ""));
+  // Native typed shell "exec" is not Code mode.
+  const type = detail !== null && typeof detail === "object" && "type" in detail ? detail.type : undefined;
+  if (typeof type === "string" && type !== "unknown") return lookup(DETAIL_ICONS, type) ?? icon ?? "Wrench";
+  return icon ?? (/(?:^|__)mcp(?:__|$)/.test(normalized) ? "Plug" : "Wrench");
+}
+
+const DETAIL_ARGUMENTS: Readonly<Record<string, string>> = {
+  shell: "command", read: "filePath", write: "filePath", edit: "filePath",
+  search: "query", fetch: "url", sub_agent: "description", worktree_setup: "branchName",
+};
+const INPUT_ARGUMENTS = ["command", "cmd", "file_path", "filePath", "path", "pattern", "query", "url"];
+const ARGUMENT_CHARS = 200;
+
+/** The call's own main argument for the collapsed header: one literal value, first
+ * line only, from a bounded prefix. Never a generated or combined summary. */
+export function toolArgument(detail: unknown): string | undefined {
+  if (detail === null || typeof detail !== "object" || Array.isArray(detail)) return undefined;
+  const fields = detail as Record<string, unknown>;
+  const type = typeof fields.type === "string" ? fields.type : "";
+  let value: unknown;
+  if (type === "unknown") {
+    const input = fields.input;
+    if (input !== null && typeof input === "object" && !Array.isArray(input)) {
+      const key = INPUT_ARGUMENTS.find(name => Object.hasOwn(input, name)
+        && typeof (input as Record<string, unknown>)[name] === "string");
+      if (key) value = (input as Record<string, unknown>)[key];
+    }
+  } else {
+    const key = lookup(DETAIL_ARGUMENTS, type);
+    if (key && Object.hasOwn(fields, key)) value = fields[key];
+  }
+  if (typeof value !== "string") return undefined;
+  const prefix = value.slice(0, ARGUMENT_CHARS).trimStart();
+  const end = prefix.search(/[\r\n]/);
+  const line = (end === -1 ? prefix : prefix.slice(0, end)).trimEnd();
+  if (!line) return undefined;
+  return end !== -1 || value.length > ARGUMENT_CHARS ? line + "…" : line;
+}

package/shared/timeline.ts

@@ -0,0 +1,42 @@
+import type { AgentTimelineItem, JsonValue } from "@getpaseo/protocol/agent-types";
+import { z } from "zod";
+import { toolIcon } from "./presentation";
+
+export const TOOL_CALL_RENDERER_KIND = "colorful-tool-call";
+export const TOOL_CALL_RENDERER_VERSION = 1;
+export const REASONING_RENDERER_KIND = "colorful-reasoning";
+export const REASONING_RENDERER_VERSION = 1;
+
+export const reasoningItemDataSchema = z.object({
+  text: z.string(),
+  phase: z.enum(["streaming", "complete"]),
+});
+export type ReasoningItemData = z.output<typeof reasoningItemDataSchema>;
+
+export const toolCallItemDataSchema = z.object({
+  name: z.string(),
+  status: z.enum(["running", "completed", "failed", "canceled"]),
+  detail: z.json(),
+  error: z.json().optional(),
+  presentation: z.object({ icon: z.string() }),
+});
+export type ToolCallItemData = z.output<typeof toolCallItemDataSchema>;
+
+function jsonValue(value: unknown): JsonValue {
+  try {
+    const source = JSON.stringify(value);
+    return source === undefined ? null : JSON.parse(source) as JsonValue;
+  } catch { return null; }
+}
+
+export function createToolCallData(
+  item: Extract<AgentTimelineItem, { type: "tool_call" }>,
+): ToolCallItemData {
+  return {
+    name: item.name,
+    status: item.status,
+    detail: jsonValue(item.detail),
+    ...(item.error != null ? { error: jsonValue(item.error) } : {}),
+    presentation: { icon: toolIcon(item.name, item.detail) },
+  };
+}