jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add missing Rust imports for Windows build and check in pending changes

Browse Source 
Add `use std::hash::{DefaultHasher, Hash, Hasher}` behind #[cfg(windows)]
in runtime_manager.rs — these types are used in hash_seed() which only
compiles on Windows, causing CI failure.

Also includes: app component refactors (agent-list, agent-status-bar,
stream-strategy-web), website index updates, server dep additions
(fast-uri, rotating-file-stream sort), lockfile sync, and removal of
RUNTIME_SIMPLIFICATION_PLAN.md.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mohamed Boudra
2026-03-09 16:09:48 +07:00
co-authored by Claude Opus 4.6
parent 02d74777b2
commit 7f11b93e0f
8 changed files with 437 additions and 769 deletions
Download Patch File Download Diff File Expand all files Collapse all files
RUNTIME_SIMPLIFICATION_PLAN.md
-81
View File
@@ -1,81 +0,0 @@
# Runtime Simplification Plan
## Goal
Remove the managed runtime install/copy layer. The desktop app must run the bundled runtime in place from the application resources/install directory on macOS, Windows, and Linux.
This is a simplification task. If a change preserves the old install-manager shape under a new name, it fails the goal.
## Hard Requirements
1. The bundled runtime is read-only.
The desktop app must not copy the bundled runtime to app data, temp, cache, or any other writable directory.
2. The app must execute Node/CLI/server entrypoints directly from the bundled runtime root.
On macOS this means inside `Paseo.app/Contents/Resources/...`.
On Windows and Linux this means inside the installed app resources directory.
3. There is exactly one runtime per installed app.
Remove versioned installed runtime directories like `runtime/<runtime-id>` from the runtime execution path.
4. The CLI shim may point into the installed app bundle/directory.
Do not keep an extra installed runtime tree just to preserve a stable shim target across updates.
5. All mutable state remains outside the bundled runtime.
Logs, sockets/pipes, PID files, daemon state, `PASEO_HOME`, and any other writable files must continue to live in managed home / app data locations.
6. Runtime discovery must stay cross-platform.
The implementation must resolve the bundled runtime/resources path on macOS, Windows, and Linux using the app install/resources directory, not hardcoded `.app` assumptions.
7. Remove dead machinery, do not leave adapters behind.
If install/copy/versioned-runtime code becomes unused, delete it instead of keeping fallback paths "just in case".
## Non-Goals
1. Do not change how the runtime is built into the desktop app bundle in this task.
This task is about runtime execution and path management, not bundling format.
2. Do not reintroduce a second runtime location for migration compatibility.
It is acceptable if older installed clients do not migrate cleanly.
3. Do not add feature flags, env-guarded fallback paths, or compatibility shims unless absolutely required by a real platform constraint proven in code.
## Concrete Implementation Direction
1. Treat `bundled_runtime_root(app)` plus `current-runtime.json` as the runtime source of truth.
2. Replace `paths.runtime_root` usage for runtime execution with the bundled runtime root selected by `current-runtime.json`.
3. Delete `install_runtime_if_needed(...)` and related copy/install staging logic if nothing else still needs it.
4. Rework CLI shim generation so the inner launcher points at the bundled runtime's Node + CLI entrypoint directly, while still keeping mutable state (`PASEO_HOME`) outside the runtime.
5. Simplify `ManagedPaths` and related structs if `runtime_root` and `stable_runtime_root` no longer need separate installed-runtime semantics.
6. Keep diagnostics/status reporting accurate.
If the app reports bundled vs installed runtime roots today, update that output to reflect the new single-runtime model.
## Acceptance Criteria
1. No code path copies the bundled runtime tree into app data before launching the daemon or CLI.
2. No code path depends on a versioned installed runtime directory for execution.
3. The CLI shim and daemon launch path both resolve to bundled runtime executables/resources.
4. Typecheck passes.
5. Relevant desktop/runtime tests pass, updated to reflect the new direct-from-bundle model.
6. The resulting implementation is materially simpler:
fewer runtime path concepts, fewer staging/install branches, fewer indirections.
## Review Bar
The implementation should be rejected if:
- it still copies the runtime anywhere before execution
- it keeps runtime version directories in the execution path
- it preserves the stable installed runtime launcher concept without a hard platform reason
- it adds migration complexity for old installs
- it introduces new fallback branches instead of removing obsolete ones
package-lock.json
Generated
+20 -35
View File
@@ -7731,7 +7731,6 @@
"cpu": [ "cpu": [
"arm" "arm"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7745,7 +7744,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7759,7 +7757,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7773,7 +7770,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7787,7 +7783,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7801,7 +7796,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7815,7 +7809,6 @@
"cpu": [ "cpu": [
"arm" "arm"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7829,7 +7822,6 @@
"cpu": [ "cpu": [
"arm" "arm"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7843,7 +7835,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7857,7 +7848,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7871,7 +7861,6 @@
"cpu": [ "cpu": [
"loong64" "loong64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7885,7 +7874,6 @@
"cpu": [ "cpu": [
"loong64" "loong64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7899,7 +7887,6 @@
"cpu": [ "cpu": [
"ppc64" "ppc64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7913,7 +7900,6 @@
"cpu": [ "cpu": [
"ppc64" "ppc64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7927,7 +7913,6 @@
"cpu": [ "cpu": [
"riscv64" "riscv64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7941,7 +7926,6 @@
"cpu": [ "cpu": [
"riscv64" "riscv64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7955,7 +7939,6 @@
"cpu": [ "cpu": [
"s390x" "s390x"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7969,7 +7952,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7983,7 +7965,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -7997,7 +7978,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -8011,7 +7991,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -8025,7 +8004,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -8039,7 +8017,6 @@
"cpu": [ "cpu": [
"ia32" "ia32"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -8053,7 +8030,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -8067,7 +8043,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -9511,7 +9486,6 @@
"version": "19.2.14", "version": "19.2.14",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
"integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"csstype": "^3.2.2" "csstype": "^3.2.2"
@@ -9521,7 +9495,7 @@
"version": "19.2.3", "version": "19.2.3",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
"dev": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"peerDependencies": { "peerDependencies": {
"@types/react": "^19.2.0" "@types/react": "^19.2.0"
@@ -12535,7 +12509,6 @@
"version": "3.2.3", "version": "3.2.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/data-view-buffer": { "node_modules/data-view-buffer": {
@@ -16346,6 +16319,22 @@
"integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==", "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/fast-uri": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
"integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/fastify"
},
{
"type": "opencollective",
"url": "https://opencollective.com/fastify"
}
],
"license": "BSD-3-Clause"
},
"node_modules/fastq": { "node_modules/fastq": {
"version": "1.20.1", "version": "1.20.1",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -17197,7 +17186,7 @@
"version": "16.8.1", "version": "16.8.1",
"resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz", "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz",
"integrity": "sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==", "integrity": "sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==",
"dev": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0" "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
@@ -18611,7 +18600,7 @@
"version": "2.6.1", "version": "2.6.1",
"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz", "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
"integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==", "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
"dev": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"bin": { "bin": {
"jiti": "lib/jiti-cli.mjs" "jiti": "lib/jiti-cli.mjs"
@@ -23341,7 +23330,6 @@
"version": "0.17.0", "version": "0.17.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
"integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==", "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
@@ -23908,7 +23896,6 @@
"version": "4.59.0", "version": "4.59.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
"integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==", "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@types/estree": "1.0.8" "@types/estree": "1.0.8"
@@ -26596,7 +26583,6 @@
"version": "7.3.1", "version": "7.3.1",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
"integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"esbuild": "^0.27.0", "esbuild": "^0.27.0",
@@ -26714,7 +26700,6 @@
"version": "8.5.8", "version": "8.5.8",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
"integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==", "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
"dev": true,
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@@ -27498,7 +27483,6 @@
"version": "4.3.6", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz", "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
"integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==", "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
"dev": true,
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"url": "https://github.com/sponsors/colinhacks" "url": "https://github.com/sponsors/colinhacks"
@@ -27769,6 +27753,7 @@
"dotenv": "^17.2.3", "dotenv": "^17.2.3",
"express": "^4.18.2", "express": "^4.18.2",
"express-basic-auth": "^1.2.1", "express-basic-auth": "^1.2.1",
"fast-uri": "^3.1.0",
"lezer-elixir": "^1.1.2", "lezer-elixir": "^1.1.2",
"mnemonic-id": "^3.2.7", "mnemonic-id": "^3.2.7",
"node-pty": "1.2.0-beta.11", "node-pty": "1.2.0-beta.11",
packages/app/src/components/agent-list.tsx
+217 -446
View File
@@ -6,187 +6,126 @@ import {
RefreshControl, RefreshControl,
FlatList, FlatList,
type ListRenderItem, type ListRenderItem,
} from "react-native"; } from 'react-native'
import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useCallback, useMemo, useState, type ReactElement } from "react"; import { useCallback, useMemo, useState, type ReactElement } from 'react'
import { router, usePathname, type Href } from "expo-router"; import { router, usePathname, type Href } from 'expo-router'
import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles"; import { StyleSheet, UnistylesRuntime, useUnistyles } from 'react-native-unistyles'
import { formatTimeAgo } from "@/utils/time"; import { formatTimeAgo } from '@/utils/time'
import { shortenPath } from "@/utils/shorten-path"; import { shortenPath } from '@/utils/shorten-path'
import { type AggregatedAgent } from "@/hooks/use-aggregated-agents"; import { type AggregatedAgent } from '@/hooks/use-aggregated-agents'
import { useSessionStore } from "@/stores/session-store"; import { useSessionStore } from '@/stores/session-store'
import { AgentStatusDot } from "@/components/agent-status-dot"; import { AgentStatusDot } from '@/components/agent-status-dot'
import { import { buildAgentNavigationKey, startNavigationTiming } from '@/utils/navigation-timing'
buildAgentNavigationKey, import { buildHostWorkspaceAgentRoute } from '@/utils/host-routes'
startNavigationTiming,
} from "@/utils/navigation-timing";
import { buildHostWorkspaceAgentRoute } from "@/utils/host-routes";
interface AgentListProps { interface AgentListProps {
agents: AggregatedAgent[]; agents: AggregatedAgent[]
showCheckoutInfo?: boolean; showCheckoutInfo?: boolean
isRefreshing?: boolean; isRefreshing?: boolean
onRefresh?: () => void; onRefresh?: () => void
selectedAgentId?: string; selectedAgentId?: string
onAgentSelect?: () => void; onAgentSelect?: () => void
listFooterComponent?: ReactElement | null; listFooterComponent?: ReactElement | null
} }
interface AgentListSection { interface AgentListSection {
key: string; key: string
title: string; title: string
data: AggregatedAgent[]; data: AggregatedAgent[]
} }
type SessionColumnKey = "session" | "project" | "host" | "status" | "updated";
interface SessionColumnDefinition {
key: SessionColumnKey;
label: string;
flex: number;
align?: "left" | "right";
mobile?: boolean;
requiresMultiHost?: boolean;
}
const SESSION_COLUMNS: SessionColumnDefinition[] = [
{ key: "session", label: "Session", flex: 2.3, mobile: true },
{ key: "project", label: "Project", flex: 2.6 },
{ key: "host", label: "Host", flex: 1.2, requiresMultiHost: true },
{ key: "status", label: "Status", flex: 1.2, mobile: true },
{ key: "updated", label: "Updated", flex: 1, align: "right", mobile: true },
];
function deriveDateSectionLabel(lastActivityAt: Date): string { function deriveDateSectionLabel(lastActivityAt: Date): string {
const now = new Date(); const now = new Date()
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())
const yesterdayStart = new Date(todayStart.getTime() - 24 * 60 * 60 * 1000); const yesterdayStart = new Date(todayStart.getTime() - 24 * 60 * 60 * 1000)
const activityStart = new Date( const activityStart = new Date(
lastActivityAt.getFullYear(), lastActivityAt.getFullYear(),
lastActivityAt.getMonth(), lastActivityAt.getMonth(),
lastActivityAt.getDate() lastActivityAt.getDate()
); )
if (activityStart.getTime() >= todayStart.getTime()) { if (activityStart.getTime() >= todayStart.getTime()) {
return "Today"; return 'Today'
} }
if (activityStart.getTime() >= yesterdayStart.getTime()) { if (activityStart.getTime() >= yesterdayStart.getTime()) {
return "Yesterday"; return 'Yesterday'
} }
const diffTime = todayStart.getTime() - activityStart.getTime(); const diffTime = todayStart.getTime() - activityStart.getTime()
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
if (diffDays <= 7) { if (diffDays <= 7) {
return "This week"; return 'This week'
} }
if (diffDays <= 30) { if (diffDays <= 30) {
return "This month"; return 'This month'
} }
return "Older"; return 'Older'
} }
function formatStatusLabel(status: AggregatedAgent["status"]): string { function formatStatusLabel(status: AggregatedAgent['status']): string {
switch (status) { switch (status) {
case "initializing": case 'initializing':
return "Starting"; return 'Starting'
case "idle": case 'idle':
return "Idle"; return 'Idle'
case "running": case 'running':
return "Running"; return 'Running'
case "error": case 'error':
return "Error"; return 'Error'
case "closed": case 'closed':
return "Closed"; return 'Closed'
default: default:
return status; return status
} }
} }
function getVisibleColumns(input: {
isMobile: boolean;
showHostColumn: boolean;
}): SessionColumnDefinition[] {
return SESSION_COLUMNS.filter((column) => {
if (!input.showHostColumn && column.requiresMultiHost) {
return false;
}
if (input.isMobile && !column.mobile) {
return false;
}
return true;
});
}
function SessionCell({
align = "left",
flex,
children,
}: {
align?: "left" | "right";
flex: number;
children: ReactElement;
}) {
return (
<View
style={[
styles.cell,
{ flex },
align === "right" ? styles.cellRight : styles.cellLeft,
]}
>
{children}
</View>
);
}
function SessionBadge({ function SessionBadge({
label, label,
tone = "neutral", tone = 'neutral',
}: { }: {
label: string; label: string
tone?: "neutral" | "warning" | "danger"; tone?: 'neutral' | 'warning' | 'danger'
}) { }) {
return ( return (
<View <View
style={[ style={[
styles.badge, styles.badge,
tone === "warning" && styles.badgeWarning, tone === 'warning' && styles.badgeWarning,
tone === "danger" && styles.badgeDanger, tone === 'danger' && styles.badgeDanger,
]} ]}
> >
<Text <Text
style={[ style={[
styles.badgeText, styles.badgeText,
tone === "warning" && styles.badgeTextWarning, tone === 'warning' && styles.badgeTextWarning,
tone === "danger" && styles.badgeTextDanger, tone === 'danger' && styles.badgeTextDanger,
]} ]}
> >
{label} {label}
</Text> </Text>
</View> </View>
); )
} }
function SessionTableRow({ function SessionRow({
agent, agent,
columns,
isMobile, isMobile,
selectedAgentId, selectedAgentId,
onPress, onPress,
onLongPress, onLongPress,
}: { }: {
agent: AggregatedAgent; agent: AggregatedAgent
columns: SessionColumnDefinition[]; isMobile: boolean
isMobile: boolean; selectedAgentId?: string
selectedAgentId?: string; onPress: (agent: AggregatedAgent) => void
onPress: (agent: AggregatedAgent) => void; onLongPress: (agent: AggregatedAgent) => void
onLongPress: (agent: AggregatedAgent) => void;
}) { }) {
const timeAgo = formatTimeAgo(agent.lastActivityAt); const timeAgo = formatTimeAgo(agent.lastActivityAt)
const agentKey = `${agent.serverId}:${agent.id}`; const agentKey = `${agent.serverId}:${agent.id}`
const isSelected = selectedAgentId === agentKey; const isSelected = selectedAgentId === agentKey
const statusLabel = formatStatusLabel(agent.status); const statusLabel = formatStatusLabel(agent.status)
const projectPath = shortenPath(agent.cwd); const projectPath = shortenPath(agent.cwd)
return ( return (
<Pressable <Pressable
@@ -200,128 +139,64 @@ function SessionTableRow({
onLongPress={() => onLongPress(agent)} onLongPress={() => onLongPress(agent)}
testID={`agent-row-${agent.serverId}-${agent.id}`} testID={`agent-row-${agent.serverId}-${agent.id}`}
> >
{({ hovered }) => ( <View style={styles.rowLeading}>
<View style={styles.rowInner}> <AgentStatusDot status={agent.status} requiresAttention={agent.requiresAttention} />
{columns.map((column) => { </View>
if (column.key === "session") { <View style={styles.rowContent}>
return ( <View style={styles.rowTitleRow}>
<SessionCell key={column.key} flex={column.flex} align={column.align}> <Text
<View style={styles.primaryCell}> style={[styles.sessionTitle, isSelected && styles.sessionTitleHighlighted]}
<View style={styles.sessionTitleRow}> numberOfLines={1}
<Text >
style={[ {agent.title || 'New session'}
styles.sessionTitle, </Text>
(isSelected || hovered) && styles.sessionTitleHighlighted, {agent.archivedAt ? <SessionBadge label="Archived" /> : null}
]} {(agent.pendingPermissionCount ?? 0) > 0 ? (
numberOfLines={1} <SessionBadge label={`${agent.pendingPermissionCount} pending`} tone="warning" />
> ) : null}
{agent.title || "New session"} {!isMobile && agent.requiresAttention ? (
</Text> <SessionBadge label="Attention" tone="danger" />
{agent.archivedAt ? <SessionBadge label="Archived" /> : null} ) : null}
{(agent.pendingPermissionCount ?? 0) > 0 ? (
<SessionBadge
label={`${agent.pendingPermissionCount} pending`}
tone="warning"
/>
) : null}
</View>
{isMobile ? (
<View style={styles.sessionMetaRow}>
<Text style={styles.sessionMetaText} numberOfLines={1}>
{projectPath}
</Text>
<Text style={styles.sessionMetaSeparator}>·</Text>
<Text style={styles.sessionMetaText}>{statusLabel}</Text>
{agent.serverLabel ? (
<>
<Text style={styles.sessionMetaSeparator}>·</Text>
<Text style={styles.sessionMetaText} numberOfLines={1}>
{agent.serverLabel}
</Text>
</>
) : null}
</View>
) : (
<View style={styles.secondaryBadgeRow}>
{agent.requiresAttention ? (
<SessionBadge label="Attention" tone="danger" />
) : null}
</View>
)}
</View>
</SessionCell>
);
}
if (column.key === "project") {
return (
<SessionCell key={column.key} flex={column.flex} align={column.align}>
<View style={styles.projectCell}>
<Text style={styles.projectPath} numberOfLines={1}>
{projectPath}
</Text>
<Text style={styles.projectProvider} numberOfLines={1}>
{agent.provider}
</Text>
</View>
</SessionCell>
);
}
if (column.key === "host") {
return (
<SessionCell key={column.key} flex={column.flex} align={column.align}>
<Text style={styles.hostText} numberOfLines={1}>
{agent.serverLabel}
</Text>
</SessionCell>
);
}
if (column.key === "status") {
return (
<SessionCell key={column.key} flex={column.flex} align={column.align}>
<View style={styles.statusCell}>
<AgentStatusDot
status={agent.status}
requiresAttention={agent.requiresAttention}
/>
<Text style={styles.statusText} numberOfLines={1}>
{statusLabel}
</Text>
</View>
</SessionCell>
);
}
return (
<SessionCell key={column.key} flex={column.flex} align={column.align}>
<Text style={styles.updatedText} numberOfLines={1}>
{timeAgo}
</Text>
</SessionCell>
);
})}
</View> </View>
)} <View style={styles.rowMetaRow}>
<Text style={styles.sessionMetaText} numberOfLines={1}>
{projectPath}
</Text>
<Text style={styles.sessionMetaSeparator}>·</Text>
<Text style={styles.sessionMetaText}>{statusLabel}</Text>
<Text style={styles.sessionMetaSeparator}>·</Text>
<Text style={styles.sessionMetaText}>{timeAgo}</Text>
{agent.serverLabel ? (
<>
<Text style={styles.sessionMetaSeparator}>·</Text>
<Text style={styles.sessionMetaText} numberOfLines={1}>
{agent.serverLabel}
</Text>
</>
) : null}
</View>
</View>
{isMobile && agent.requiresAttention ? (
<View style={styles.rowTrailing}>
<SessionBadge label="Attention" tone="danger" />
</View>
) : null}
</Pressable> </Pressable>
); )
} }
function SessionTableSection({ function SessionTableSection({
section, section,
columns,
isMobile, isMobile,
selectedAgentId, selectedAgentId,
onAgentPress, onAgentPress,
onAgentLongPress, onAgentLongPress,
}: { }: {
section: AgentListSection; section: AgentListSection
columns: SessionColumnDefinition[]; isMobile: boolean
isMobile: boolean; selectedAgentId?: string
selectedAgentId?: string; onAgentPress: (agent: AggregatedAgent) => void
onAgentPress: (agent: AggregatedAgent) => void; onAgentLongPress: (agent: AggregatedAgent) => void
onAgentLongPress: (agent: AggregatedAgent) => void;
}) { }) {
return ( return (
<View style={styles.sectionBlock}> <View style={styles.sectionBlock}>
@@ -330,31 +205,14 @@ function SessionTableSection({
<View style={styles.sectionLine} /> <View style={styles.sectionLine} />
</View> </View>
<View style={styles.tableCard}> <View style={styles.listCard}>
<View style={styles.tableHeader}>
{columns.map((column) => (
<SessionCell key={column.key} flex={column.flex} align={column.align}>
<Text
style={[
styles.columnLabel,
column.align === "right" && styles.columnLabelRight,
]}
numberOfLines={1}
>
{column.label}
</Text>
</SessionCell>
))}
</View>
{section.data.map((agent, index) => ( {section.data.map((agent, index) => (
<View <View
key={`${agent.serverId}:${agent.id}`} key={`${agent.serverId}:${agent.id}`}
style={index > 0 ? styles.rowDivider : undefined} style={index > 0 ? styles.rowDivider : undefined}
> >
<SessionTableRow <SessionRow
agent={agent} agent={agent}
columns={columns}
isMobile={isMobile} isMobile={isMobile}
selectedAgentId={selectedAgentId} selectedAgentId={selectedAgentId}
onPress={onAgentPress} onPress={onAgentPress}
@@ -364,7 +222,7 @@ function SessionTableSection({
))} ))}
</View> </View>
</View> </View>
); )
} }
export function AgentList({ export function AgentList({
@@ -375,110 +233,96 @@ export function AgentList({
onAgentSelect, onAgentSelect,
listFooterComponent, listFooterComponent,
}: AgentListProps) { }: AgentListProps) {
const { theme } = useUnistyles(); const { theme } = useUnistyles()
const pathname = usePathname(); const pathname = usePathname()
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets()
const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null); const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null)
const isMobile = const isMobile = UnistylesRuntime.breakpoint === 'xs' || UnistylesRuntime.breakpoint === 'sm'
UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
const actionClient = useSessionStore((state) => const actionClient = useSessionStore((state) =>
actionAgent?.serverId ? state.sessions[actionAgent.serverId]?.client ?? null : null actionAgent?.serverId ? (state.sessions[actionAgent.serverId]?.client ?? null) : null
); )
const isActionSheetVisible = actionAgent !== null; const isActionSheetVisible = actionAgent !== null
const isActionDaemonUnavailable = Boolean(actionAgent?.serverId && !actionClient); const isActionDaemonUnavailable = Boolean(actionAgent?.serverId && !actionClient)
const showHostColumn = useMemo(
() => new Set(agents.map((agent) => agent.serverId)).size > 1,
[agents]
);
const columns = useMemo(
() => getVisibleColumns({ isMobile, showHostColumn }),
[isMobile, showHostColumn]
);
const handleAgentPress = useCallback( const handleAgentPress = useCallback(
(agent: AggregatedAgent) => { (agent: AggregatedAgent) => {
if (isActionSheetVisible) { if (isActionSheetVisible) {
return; return
} }
const serverId = agent.serverId; const serverId = agent.serverId
const agentId = agent.id; const agentId = agent.id
const navigationKey = buildAgentNavigationKey(serverId, agentId); const navigationKey = buildAgentNavigationKey(serverId, agentId)
startNavigationTiming(navigationKey, { startNavigationTiming(navigationKey, {
from: "home", from: 'home',
to: "agent", to: 'agent',
params: { serverId, agentId }, params: { serverId, agentId },
}); })
const shouldReplace = pathname.startsWith("/h/"); const shouldReplace = pathname.startsWith('/h/')
const navigate = shouldReplace ? router.replace : router.push; const navigate = shouldReplace ? router.replace : router.push
onAgentSelect?.(); onAgentSelect?.()
const route: Href = buildHostWorkspaceAgentRoute( const route: Href = buildHostWorkspaceAgentRoute(serverId, agent.cwd, agentId) as Href
serverId, navigate(route)
agent.cwd,
agentId
) as Href;
navigate(route);
}, },
[isActionSheetVisible, pathname, onAgentSelect] [isActionSheetVisible, pathname, onAgentSelect]
); )
const handleAgentLongPress = useCallback((agent: AggregatedAgent) => { const handleAgentLongPress = useCallback((agent: AggregatedAgent) => {
setActionAgent(agent); setActionAgent(agent)
}, []); }, [])
const handleCloseActionSheet = useCallback(() => { const handleCloseActionSheet = useCallback(() => {
setActionAgent(null); setActionAgent(null)
}, []); }, [])
const handleArchiveAgent = useCallback(() => { const handleArchiveAgent = useCallback(() => {
if (!actionAgent || !actionClient) { if (!actionAgent || !actionClient) {
return; return
} }
void actionClient.archiveAgent(actionAgent.id); void actionClient.archiveAgent(actionAgent.id)
setActionAgent(null); setActionAgent(null)
}, [actionAgent, actionClient]); }, [actionAgent, actionClient])
const sections = useMemo((): AgentListSection[] => { const sections = useMemo((): AgentListSection[] => {
const order = ["Today", "Yesterday", "This week", "This month", "Older"] as const; const order = ['Today', 'Yesterday', 'This week', 'This month', 'Older'] as const
const buckets = new Map<string, AggregatedAgent[]>(); const buckets = new Map<string, AggregatedAgent[]>()
for (const agent of agents) { for (const agent of agents) {
const label = deriveDateSectionLabel(agent.lastActivityAt); const label = deriveDateSectionLabel(agent.lastActivityAt)
const existing = buckets.get(label) ?? []; const existing = buckets.get(label) ?? []
existing.push(agent); existing.push(agent)
buckets.set(label, existing); buckets.set(label, existing)
} }
const result: AgentListSection[] = []; const result: AgentListSection[] = []
for (const label of order) { for (const label of order) {
const data = buckets.get(label); const data = buckets.get(label)
if (!data || data.length === 0) { if (!data || data.length === 0) {
continue; continue
} }
result.push({ key: `date:${label}`, title: label, data }); result.push({ key: `date:${label}`, title: label, data })
} }
return result; return result
}, [agents]); }, [agents])
const renderSection: ListRenderItem<AgentListSection> = useCallback( const renderSection: ListRenderItem<AgentListSection> = useCallback(
({ item: section }) => ( ({ item: section }) => (
<SessionTableSection <SessionTableSection
section={section} section={section}
columns={columns}
isMobile={isMobile} isMobile={isMobile}
selectedAgentId={selectedAgentId} selectedAgentId={selectedAgentId}
onAgentPress={handleAgentPress} onAgentPress={handleAgentPress}
onAgentLongPress={handleAgentLongPress} onAgentLongPress={handleAgentLongPress}
/> />
), ),
[columns, handleAgentLongPress, handleAgentPress, isMobile, selectedAgentId] [handleAgentLongPress, handleAgentPress, isMobile, selectedAgentId]
); )
const keyExtractor = useCallback((section: AgentListSection) => section.key, []); const keyExtractor = useCallback((section: AgentListSection) => section.key, [])
return ( return (
<> <>
@@ -510,10 +354,7 @@ export function AgentList({
onRequestClose={handleCloseActionSheet} onRequestClose={handleCloseActionSheet}
> >
<View style={styles.sheetOverlay}> <View style={styles.sheetOverlay}>
<Pressable <Pressable style={styles.sheetBackdrop} onPress={handleCloseActionSheet} />
style={styles.sheetBackdrop}
onPress={handleCloseActionSheet}
/>
<View <View
style={[ style={[
styles.sheetContainer, styles.sheetContainer,
@@ -522,7 +363,7 @@ export function AgentList({
> >
<View style={styles.sheetHandle} /> <View style={styles.sheetHandle} />
<Text style={styles.sheetTitle}> <Text style={styles.sheetTitle}>
{isActionDaemonUnavailable ? "Host offline" : "Archive this session?"} {isActionDaemonUnavailable ? 'Host offline' : 'Archive this session?'}
</Text> </Text>
<View style={styles.sheetButtonRow}> <View style={styles.sheetButtonRow}>
<Pressable <Pressable
@@ -552,7 +393,7 @@ export function AgentList({
</View> </View>
</Modal> </Modal>
</> </>
); )
} }
const styles = StyleSheet.create((theme) => ({ const styles = StyleSheet.create((theme) => ({
@@ -573,17 +414,17 @@ const styles = StyleSheet.create((theme) => ({
marginTop: theme.spacing[2], marginTop: theme.spacing[2],
}, },
sectionHeading: { sectionHeading: {
flexDirection: "row", flexDirection: 'row',
alignItems: "center", alignItems: 'center',
gap: theme.spacing[3], gap: theme.spacing[3],
paddingHorizontal: theme.spacing[1], paddingHorizontal: theme.spacing[1],
marginBottom: theme.spacing[2], marginBottom: theme.spacing[2],
}, },
sectionTitle: { sectionTitle: {
fontSize: theme.fontSize.sm, fontSize: theme.fontSize.sm,
fontWeight: "600", fontWeight: '600',
color: theme.colors.foregroundMuted, color: theme.colors.foregroundMuted,
textTransform: "uppercase", textTransform: 'uppercase',
letterSpacing: 0.6, letterSpacing: 0.6,
}, },
sectionLine: { sectionLine: {
@@ -591,100 +432,66 @@ const styles = StyleSheet.create((theme) => ({
height: StyleSheet.hairlineWidth, height: StyleSheet.hairlineWidth,
backgroundColor: theme.colors.surface2, backgroundColor: theme.colors.surface2,
}, },
tableCard: { listCard: {
overflow: "hidden", overflow: 'hidden',
borderRadius: theme.borderRadius.xl, borderRadius: theme.borderRadius.lg,
borderWidth: StyleSheet.hairlineWidth,
borderColor: theme.colors.surface2,
backgroundColor: theme.colors.surface1,
},
tableHeader: {
flexDirection: "row",
alignItems: "center",
paddingHorizontal: {
xs: theme.spacing[3],
md: theme.spacing[4],
},
paddingVertical: theme.spacing[2],
backgroundColor: theme.colors.surface0,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: theme.colors.surface2,
},
columnLabel: {
fontSize: theme.fontSize.xs,
fontWeight: "600",
color: theme.colors.foregroundMuted,
textTransform: "uppercase",
letterSpacing: 0.6,
},
columnLabelRight: {
textAlign: "right",
}, },
rowDivider: { rowDivider: {
borderTopWidth: StyleSheet.hairlineWidth, borderTopWidth: StyleSheet.hairlineWidth,
borderTopColor: theme.colors.surface2, borderTopColor: theme.colors.border,
}, },
row: { row: {
paddingHorizontal: { flexDirection: 'row',
xs: theme.spacing[3], alignItems: 'center',
md: theme.spacing[4], paddingVertical: theme.spacing[2],
}, paddingHorizontal: theme.spacing[3],
paddingVertical: { borderRadius: theme.borderRadius.lg,
xs: theme.spacing[2], marginBottom: theme.spacing[1],
md: theme.spacing[3],
},
}, },
rowInner: { rowLeading: {
flexDirection: "row", marginRight: theme.spacing[3],
alignItems: "center", },
gap: theme.spacing[3], rowContent: {
flex: 1,
minWidth: 0,
},
rowTitleRow: {
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
gap: theme.spacing[2],
},
rowMetaRow: {
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
gap: theme.spacing[1],
marginTop: 2,
},
rowTrailing: {
marginLeft: theme.spacing[2],
}, },
rowSelected: { rowSelected: {
backgroundColor: theme.colors.surface2, backgroundColor: theme.colors.surface2,
}, },
rowHovered: { rowHovered: {
backgroundColor: theme.colors.surface0, backgroundColor: theme.colors.surface1,
}, },
rowPressed: { rowPressed: {
backgroundColor: theme.colors.surface2, backgroundColor: theme.colors.surface2,
}, },
cell: {
minWidth: 0,
},
cellLeft: {
alignItems: "flex-start",
},
cellRight: {
alignItems: "flex-end",
},
primaryCell: {
width: "100%",
gap: theme.spacing[1],
},
sessionTitleRow: {
flexDirection: "row",
alignItems: "center",
flexWrap: "wrap",
gap: theme.spacing[2],
},
sessionTitle: { sessionTitle: {
flexShrink: 1, flexShrink: 1,
fontSize: theme.fontSize.base, fontSize: theme.fontSize.sm,
fontWeight: "500", fontWeight: '500',
color: theme.colors.foreground, color: theme.colors.foreground,
opacity: 0.86, opacity: 0.86,
}, },
sessionTitleHighlighted: { sessionTitleHighlighted: {
opacity: 1, opacity: 1,
}, },
sessionMetaRow: {
flexDirection: "row",
alignItems: "center",
flexWrap: "wrap",
gap: theme.spacing[1],
},
sessionMetaText: { sessionMetaText: {
maxWidth: "100%", maxWidth: '100%',
fontSize: theme.fontSize.sm, fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted, color: theme.colors.foregroundMuted,
}, },
@@ -693,42 +500,6 @@ const styles = StyleSheet.create((theme) => ({
color: theme.colors.foregroundMuted, color: theme.colors.foregroundMuted,
opacity: 0.7, opacity: 0.7,
}, },
secondaryBadgeRow: {
minHeight: theme.spacing[6],
justifyContent: "center",
},
projectCell: {
width: "100%",
gap: theme.spacing[1],
},
projectPath: {
fontSize: theme.fontSize.sm,
color: theme.colors.foreground,
},
projectProvider: {
fontSize: theme.fontSize.xs,
color: theme.colors.foregroundMuted,
textTransform: "uppercase",
letterSpacing: 0.6,
},
hostText: {
fontSize: theme.fontSize.sm,
color: theme.colors.foreground,
},
statusCell: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[2],
},
statusText: {
fontSize: theme.fontSize.sm,
color: theme.colors.foreground,
},
updatedText: {
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
textAlign: "right",
},
badge: { badge: {
paddingHorizontal: theme.spacing[2], paddingHorizontal: theme.spacing[2],
paddingVertical: theme.spacing[1], paddingVertical: theme.spacing[1],
@@ -736,16 +507,16 @@ const styles = StyleSheet.create((theme) => ({
backgroundColor: theme.colors.surface2, backgroundColor: theme.colors.surface2,
}, },
badgeWarning: { badgeWarning: {
backgroundColor: "rgba(245, 158, 11, 0.12)", backgroundColor: 'rgba(245, 158, 11, 0.12)',
}, },
badgeDanger: { badgeDanger: {
backgroundColor: "rgba(239, 68, 68, 0.14)", backgroundColor: 'rgba(239, 68, 68, 0.14)',
}, },
badgeText: { badgeText: {
fontSize: theme.fontSize.xs, fontSize: theme.fontSize.xs,
fontWeight: "600", fontWeight: '600',
color: theme.colors.foregroundMuted, color: theme.colors.foregroundMuted,
textTransform: "uppercase", textTransform: 'uppercase',
letterSpacing: 0.4, letterSpacing: 0.4,
}, },
badgeTextWarning: { badgeTextWarning: {
@@ -756,26 +527,26 @@ const styles = StyleSheet.create((theme) => ({
}, },
sheetOverlay: { sheetOverlay: {
flex: 1, flex: 1,
justifyContent: "flex-end", justifyContent: 'flex-end',
}, },
sheetBackdrop: { sheetBackdrop: {
position: "absolute", position: 'absolute',
top: 0, top: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
left: 0, left: 0,
backgroundColor: "rgba(0,0,0,0.35)", backgroundColor: 'rgba(0,0,0,0.35)',
}, },
sheetContainer: { sheetContainer: {
backgroundColor: theme.colors.surface2, backgroundColor: theme.colors.surface2,
borderTopLeftRadius: theme.borderRadius["2xl"], borderTopLeftRadius: theme.borderRadius['2xl'],
borderTopRightRadius: theme.borderRadius["2xl"], borderTopRightRadius: theme.borderRadius['2xl'],
paddingHorizontal: theme.spacing[6], paddingHorizontal: theme.spacing[6],
paddingTop: theme.spacing[4], paddingTop: theme.spacing[4],
gap: theme.spacing[4], gap: theme.spacing[4],
}, },
sheetHandle: { sheetHandle: {
alignSelf: "center", alignSelf: 'center',
width: 40, width: 40,
height: 4, height: 4,
borderRadius: theme.borderRadius.full, borderRadius: theme.borderRadius.full,
@@ -786,18 +557,18 @@ const styles = StyleSheet.create((theme) => ({
fontSize: theme.fontSize.lg, fontSize: theme.fontSize.lg,
fontWeight: theme.fontWeight.semibold, fontWeight: theme.fontWeight.semibold,
color: theme.colors.foreground, color: theme.colors.foreground,
textAlign: "center", textAlign: 'center',
}, },
sheetButtonRow: { sheetButtonRow: {
flexDirection: "row", flexDirection: 'row',
gap: theme.spacing[3], gap: theme.spacing[3],
}, },
sheetButton: { sheetButton: {
flex: 1, flex: 1,
borderRadius: theme.borderRadius.lg, borderRadius: theme.borderRadius.lg,
paddingVertical: theme.spacing[4], paddingVertical: theme.spacing[4],
alignItems: "center", alignItems: 'center',
justifyContent: "center", justifyContent: 'center',
}, },
sheetArchiveButton: { sheetArchiveButton: {
backgroundColor: theme.colors.primary, backgroundColor: theme.colors.primary,
@@ -818,4 +589,4 @@ const styles = StyleSheet.create((theme) => ({
fontWeight: theme.fontWeight.semibold, fontWeight: theme.fontWeight.semibold,
fontSize: theme.fontSize.base, fontSize: theme.fontSize.base,
}, },
})); }))
packages/app/src/components/agent-status-bar.tsx
+119 -101
View File
@@ -1,4 +1,4 @@
import { useMemo, useState } from 'react' import { useCallback, useMemo, useRef, useState } from 'react'
import { View, Text, Platform, Pressable } from 'react-native' import { View, Text, Platform, Pressable } from 'react-native'
import { StyleSheet, useUnistyles } from 'react-native-unistyles' import { StyleSheet, useUnistyles } from 'react-native-unistyles'
import { Brain, ChevronDown, SlidersHorizontal } from 'lucide-react-native' import { Brain, ChevronDown, SlidersHorizontal } from 'lucide-react-native'
@@ -10,6 +10,7 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu' } from '@/components/ui/dropdown-menu'
import { Combobox, type ComboboxOption } from '@/components/ui/combobox'
import { AdaptiveModalSheet } from '@/components/adaptive-modal-sheet' import { AdaptiveModalSheet } from '@/components/adaptive-modal-sheet'
import type { import type {
AgentMode, AgentMode,
@@ -90,7 +91,12 @@ function ControlledStatusBar({
const { theme } = useUnistyles() const { theme } = useUnistyles()
const isWeb = Platform.OS === 'web' const isWeb = Platform.OS === 'web'
const [prefsOpen, setPrefsOpen] = useState(false) const [prefsOpen, setPrefsOpen] = useState(false)
const dropdownMaxWidth = isWeb ? 360 : undefined const [openSelector, setOpenSelector] = useState<'provider' | 'mode' | 'model' | 'thinking' | null>(null)
const providerAnchorRef = useRef<View>(null)
const modeAnchorRef = useRef<View>(null)
const modelAnchorRef = useRef<View>(null)
const thinkingAnchorRef = useRef<View>(null)
const canSelectProvider = Boolean(onSelectProvider && providerOptions && providerOptions.length > 0) const canSelectProvider = Boolean(onSelectProvider && providerOptions && providerOptions.length > 0)
const canSelectMode = Boolean(onSelectMode && modeOptions && modeOptions.length > 0) const canSelectMode = Boolean(onSelectMode && modeOptions && modeOptions.length > 0)
@@ -119,18 +125,47 @@ function ControlledStatusBar({
const modelDisabled = disabled || isModelLoading || !modelOptions || modelOptions.length === 0 const modelDisabled = disabled || isModelLoading || !modelOptions || modelOptions.length === 0
const SEARCH_THRESHOLD = 6
const comboboxProviderOptions = useMemo<ComboboxOption[]>(
() => (providerOptions ?? []).map((o) => ({ id: o.id, label: o.label })),
[providerOptions]
)
const comboboxModeOptions = useMemo<ComboboxOption[]>(
() => (modeOptions ?? []).map((o) => ({ id: o.id, label: o.label })),
[modeOptions]
)
const comboboxModelOptions = useMemo<ComboboxOption[]>(
() => (modelOptions ?? []).map((o) => ({ id: o.id, label: o.label })),
[modelOptions]
)
const comboboxThinkingOptions = useMemo<ComboboxOption[]>(
() => (thinkingOptions ?? []).map((o) => ({ id: o.id, label: o.label })),
[thinkingOptions]
)
const handleOpenChange = useCallback(
(selector: 'provider' | 'mode' | 'model' | 'thinking') => (nextOpen: boolean) => {
setOpenSelector(nextOpen ? selector : null)
},
[]
)
return ( return (
<View style={[styles.container, isWeb && { marginBottom: -theme.spacing[1] }]}> <View style={[styles.container, isWeb && { marginBottom: -theme.spacing[1] }]}>
{isWeb ? ( {isWeb ? (
<> <>
{providerOptions && providerOptions.length > 0 ? ( {providerOptions && providerOptions.length > 0 ? (
<DropdownMenu> <>
<DropdownMenuTrigger <Pressable
ref={providerAnchorRef}
collapsable={false}
disabled={disabled || !canSelectProvider} disabled={disabled || !canSelectProvider}
style={({ pressed, hovered, open }) => [ onPress={() => setOpenSelector(openSelector === 'provider' ? null : 'provider')}
style={({ pressed, hovered }) => [
styles.modeBadge, styles.modeBadge,
hovered && styles.modeBadgeHovered, hovered && styles.modeBadgeHovered,
(pressed || open) && styles.modeBadgePressed, (pressed || openSelector === 'provider') && styles.modeBadgePressed,
(disabled || !canSelectProvider) && styles.disabledBadge, (disabled || !canSelectProvider) && styles.disabledBadge,
]} ]}
accessibilityRole="button" accessibilityRole="button"
@@ -139,34 +174,31 @@ function ControlledStatusBar({
> >
<Text style={styles.modeBadgeText}>{displayProvider}</Text> <Text style={styles.modeBadgeText}>{displayProvider}</Text>
<ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} /> <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
</DropdownMenuTrigger> </Pressable>
<DropdownMenuContent <Combobox
side="top" options={comboboxProviderOptions}
align="start" value={selectedProviderId ?? ''}
maxWidth={dropdownMaxWidth} onSelect={(id) => onSelectProvider?.(id)}
testID="agent-provider-menu" searchable={comboboxProviderOptions.length > SEARCH_THRESHOLD}
> open={openSelector === 'provider'}
{providerOptions.map((provider) => ( onOpenChange={handleOpenChange('provider')}
<DropdownMenuItem anchorRef={providerAnchorRef}
key={provider.id} desktopPlacement="top-start"
selected={provider.id === selectedProviderId} />
onSelect={() => onSelectProvider?.(provider.id)} </>
>
{provider.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
) : null} ) : null}
{modeOptions && modeOptions.length > 0 ? ( {modeOptions && modeOptions.length > 0 ? (
<DropdownMenu> <>
<DropdownMenuTrigger <Pressable
ref={modeAnchorRef}
collapsable={false}
disabled={disabled || !canSelectMode} disabled={disabled || !canSelectMode}
style={({ pressed, hovered, open }) => [ onPress={() => setOpenSelector(openSelector === 'mode' ? null : 'mode')}
style={({ pressed, hovered }) => [
styles.modeBadge, styles.modeBadge,
hovered && styles.modeBadgeHovered, hovered && styles.modeBadgeHovered,
(pressed || open) && styles.modeBadgePressed, (pressed || openSelector === 'mode') && styles.modeBadgePressed,
(disabled || !canSelectMode) && styles.disabledBadge, (disabled || !canSelectMode) && styles.disabledBadge,
]} ]}
accessibilityRole="button" accessibilityRole="button"
@@ -175,68 +207,60 @@ function ControlledStatusBar({
> >
<Text style={styles.modeBadgeText}>{displayMode}</Text> <Text style={styles.modeBadgeText}>{displayMode}</Text>
<ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} /> <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
</DropdownMenuTrigger> </Pressable>
<DropdownMenuContent <Combobox
side="top" options={comboboxModeOptions}
align="start" value={selectedModeId ?? ''}
maxWidth={dropdownMaxWidth} onSelect={(id) => onSelectMode?.(id)}
testID="agent-mode-menu" searchable={comboboxModeOptions.length > SEARCH_THRESHOLD}
> open={openSelector === 'mode'}
{modeOptions.map((mode) => ( onOpenChange={handleOpenChange('mode')}
<DropdownMenuItem anchorRef={modeAnchorRef}
key={mode.id} desktopPlacement="top-start"
selected={mode.id === selectedModeId} />
onSelect={() => onSelectMode?.(mode.id)} </>
>
{mode.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
) : null} ) : null}
<DropdownMenu> <Pressable
<DropdownMenuTrigger ref={modelAnchorRef}
disabled={modelDisabled} collapsable={false}
style={({ pressed, hovered, open }) => [ disabled={modelDisabled}
styles.modeBadge, onPress={() => setOpenSelector(openSelector === 'model' ? null : 'model')}
hovered && styles.modeBadgeHovered, style={({ pressed, hovered }) => [
(pressed || open) && styles.modeBadgePressed, styles.modeBadge,
modelDisabled && styles.disabledBadge, hovered && styles.modeBadgeHovered,
]} (pressed || openSelector === 'model') && styles.modeBadgePressed,
accessibilityRole="button" modelDisabled && styles.disabledBadge,
accessibilityLabel="Select agent model" ]}
testID="agent-model-selector" accessibilityRole="button"
> accessibilityLabel="Select agent model"
<Text style={styles.modeBadgeText}>{displayModel}</Text> testID="agent-model-selector"
<ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} /> >
</DropdownMenuTrigger> <Text style={styles.modeBadgeText}>{displayModel}</Text>
<DropdownMenuContent <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
side="top" </Pressable>
align="start" <Combobox
maxWidth={dropdownMaxWidth} options={comboboxModelOptions}
testID="agent-model-menu" value={selectedModelId ?? ''}
> onSelect={(id) => onSelectModel?.(id)}
{(modelOptions ?? []).map((model) => ( searchable={comboboxModelOptions.length > SEARCH_THRESHOLD}
<DropdownMenuItem open={openSelector === 'model'}
key={model.id} onOpenChange={handleOpenChange('model')}
selected={model.id === selectedModelId} anchorRef={modelAnchorRef}
onSelect={() => onSelectModel?.(model.id)} desktopPlacement="top-start"
> />
{model.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
{thinkingOptions && thinkingOptions.length > 0 ? ( {thinkingOptions && thinkingOptions.length > 0 ? (
<DropdownMenu> <>
<DropdownMenuTrigger <Pressable
ref={thinkingAnchorRef}
collapsable={false}
disabled={disabled || !canSelectThinking} disabled={disabled || !canSelectThinking}
style={({ pressed, hovered, open }) => [ onPress={() => setOpenSelector(openSelector === 'thinking' ? null : 'thinking')}
style={({ pressed, hovered }) => [
styles.modeBadge, styles.modeBadge,
hovered && styles.modeBadgeHovered, hovered && styles.modeBadgeHovered,
(pressed || open) && styles.modeBadgePressed, (pressed || openSelector === 'thinking') && styles.modeBadgePressed,
(disabled || !canSelectThinking) && styles.disabledBadge, (disabled || !canSelectThinking) && styles.disabledBadge,
]} ]}
accessibilityRole="button" accessibilityRole="button"
@@ -250,24 +274,18 @@ function ControlledStatusBar({
/> />
<Text style={styles.modeBadgeText}>{displayThinking}</Text> <Text style={styles.modeBadgeText}>{displayThinking}</Text>
<ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} /> <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
</DropdownMenuTrigger> </Pressable>
<DropdownMenuContent <Combobox
side="top" options={comboboxThinkingOptions}
align="start" value={selectedThinkingOptionId ?? ''}
maxWidth={dropdownMaxWidth} onSelect={(id) => onSelectThinkingOption?.(id)}
testID="agent-thinking-menu" searchable={comboboxThinkingOptions.length > SEARCH_THRESHOLD}
> open={openSelector === 'thinking'}
{thinkingOptions.map((thinking) => ( onOpenChange={handleOpenChange('thinking')}
<DropdownMenuItem anchorRef={thinkingAnchorRef}
key={thinking.id} desktopPlacement="top-start"
selected={thinking.id === selectedThinkingOptionId} />
onSelect={() => onSelectThinkingOption?.(thinking.id)} </>
>
{thinking.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
) : null} ) : null}
</> </>
) : ( ) : (
packages/app/src/components/stream-strategy-web.tsx
+17 -14
View File
@@ -235,22 +235,25 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
[onNearBottomChange] [onNearBottomChange]
) )
const scheduleStickToBottom = useCallback((source = 'unknown') => { const scheduleStickToBottom = useCallback(
const scrollContainer = scrollContainerRef.current (source = 'unknown') => {
if (scrollContainer && isScrollContainerOverscrolledPastBottom(scrollContainer)) { const scrollContainer = scrollContainerRef.current
return if (scrollContainer && isScrollContainerOverscrolledPastBottom(scrollContainer)) {
}
if (pendingAutoScrollFrameRef.current !== null) {
return
}
pendingAutoScrollFrameRef.current = window.requestAnimationFrame(() => {
pendingAutoScrollFrameRef.current = null
if (!followOutputRef.current) {
return return
} }
scrollMessagesToBottom('auto', source) if (pendingAutoScrollFrameRef.current !== null) {
}) return
}, [scrollMessagesToBottom]) }
pendingAutoScrollFrameRef.current = window.requestAnimationFrame(() => {
pendingAutoScrollFrameRef.current = null
if (!followOutputRef.current) {
return
}
scrollMessagesToBottom('auto', source)
})
},
[scrollMessagesToBottom]
)
const forceStickToBottom = useCallback(() => { const forceStickToBottom = useCallback(() => {
cancelPendingStickToBottom() cancelPendingStickToBottom()
scrollMessagesToBottom('auto', 'force') scrollMessagesToBottom('auto', 'force')
packages/desktop/src-tauri/src/runtime_manager.rs
+2
View File
@@ -4,6 +4,8 @@ use http::Request;
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
use std::collections::HashMap; use std::collections::HashMap;
use std::env; use std::env;
#[cfg(windows)]
use std::hash::{DefaultHasher, Hash, Hasher};
use std::fs; use std::fs;
use std::io; use std::io;
use std::path::{Path, PathBuf}; use std::path::{Path, PathBuf};
packages/server/package.json
+2 -1
View File
@@ -81,6 +81,7 @@
"dotenv": "^17.2.3", "dotenv": "^17.2.3",
"express": "^4.18.2", "express": "^4.18.2",
"express-basic-auth": "^1.2.1", "express-basic-auth": "^1.2.1",
"fast-uri": "^3.1.0",
"lezer-elixir": "^1.1.2", "lezer-elixir": "^1.1.2",
"mnemonic-id": "^3.2.7", "mnemonic-id": "^3.2.7",
"node-pty": "1.2.0-beta.11", "node-pty": "1.2.0-beta.11",
@@ -89,11 +90,11 @@
"pino": "^10.2.0", "pino": "^10.2.0",
"pino-pretty": "^13.1.3", "pino-pretty": "^13.1.3",
"qrcode": "^1.5.4", "qrcode": "^1.5.4",
"rotating-file-stream": "^3.2.9",
"sherpa-onnx": "^1.12.23", "sherpa-onnx": "^1.12.23",
"sherpa-onnx-node": "^1.12.23", "sherpa-onnx-node": "^1.12.23",
"strip-ansi": "^7.1.2", "strip-ansi": "^7.1.2",
"tiny-invariant": "^1.3.3", "tiny-invariant": "^1.3.3",
"rotating-file-stream": "^3.2.9",
"uuid": "^9.0.1", "uuid": "^9.0.1",
"ws": "^8.14.2", "ws": "^8.14.2",
"zod": "^3.23.8", "zod": "^3.23.8",
packages/website/src/routes/index.tsx
+60 -91
View File
@@ -25,12 +25,9 @@ function Home() {
return ( return (
<CursorFieldProvider> <CursorFieldProvider>
{/* Hero section with background image */} {/* Hero section with background image */}
<div <div className="relative bg-cover bg-center bg-no-repeat">
className="relative bg-cover bg-center bg-no-repeat"
style={{ backgroundImage: 'url(/hero-bg.jpg)' }}
>
<div className="absolute inset-0 bg-background/90" /> <div className="absolute inset-0 bg-background/90" />
<div className="absolute inset-x-0 bottom-0 h-64 bg-gradient-to-t from-black to-transparent" /> <div className="absolute inset-x-0 bottom-0 h-64 bg-linear-to-t from-black to-transparent" />
<div className="relative p-6 pb-10 md:px-20 md:pt-20 md:pb-12 max-w-3xl mx-auto"> <div className="relative p-6 pb-10 md:px-20 md:pt-20 md:pb-12 max-w-3xl mx-auto">
<Nav /> <Nav />
@@ -117,23 +114,17 @@ function Nav() {
function Hero() { function Hero() {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<h1 className="text-3xl md:text-5xl font-medium tracking-tight"> <h1 className="text-3xl md:text-5xl font-bold tracking-tight">
Orchestrate coding agents from anywhere One interface for all your coding agents
</h1> </h1>
<p className="text-white/70 text-lg leading-relaxed"> <p className="text-white/70 text-lg leading-relaxed">
Run Claude Code, Codex, and OpenCode. From your phone, desktop and CLI, with voice support built-in. Run Claude Code, Codex, and OpenCode on your machine. Connect from your phone or desktop.
</p> </p>
</div> </div>
) )
} }
function Differentiator({ function Differentiator({ title, description }: { title: string; description: string }) {
title,
description,
}: {
title: string
description: string
}) {
return ( return (
<div> <div>
<p className="font-medium text-sm">{title}</p> <p className="font-medium text-sm">{title}</p>
@@ -183,13 +174,7 @@ function Features() {
) )
} }
function Feature({ function Feature({ title, description }: { title: string; description: string }) {
title,
description,
}: {
title: string
description: string
}) {
return ( return (
<div className="space-y-1"> <div className="space-y-1">
<p className="font-medium text-base">{title}</p> <p className="font-medium text-base">{title}</p>
@@ -226,17 +211,13 @@ function GetStarted() {
<GlobeIcon className="h-4 w-4" /> <GlobeIcon className="h-4 w-4" />
Launch Web App Launch Web App
</a> </a>
<span <span className="relative group inline-flex items-center justify-center rounded-lg border border-white/10 px-3 py-2 text-white/40 cursor-default">
className="relative group inline-flex items-center justify-center rounded-lg border border-white/10 px-3 py-2 text-white/40 cursor-default"
>
<AppleIcon className="h-5 w-5" /> <AppleIcon className="h-5 w-5" />
<span className="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 rounded bg-white text-black text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"> <span className="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 rounded bg-white text-black text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
Coming soon Coming soon
</span> </span>
</span> </span>
<span <span className="relative group inline-flex items-center justify-center rounded-lg border border-white/10 px-3 py-2 text-white/40 cursor-default">
className="relative group inline-flex items-center justify-center rounded-lg border border-white/10 px-3 py-2 text-white/40 cursor-default"
>
<GooglePlayIcon className="h-5 w-5 opacity-40" /> <GooglePlayIcon className="h-5 w-5 opacity-40" />
<span className="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 rounded bg-white text-black text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"> <span className="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 rounded bg-white text-black text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
Coming soon Coming soon
@@ -286,25 +267,38 @@ function AppStoreIcon(props: React.SVGProps<SVGSVGElement>) {
{...props} {...props}
> >
<path d="M342.277 86.6927C463.326 84.6952 587.87 65.619 705.523 104.97C830.467 143.522 874.012 278.153 872.814 397.105C873.713 481.299 874.012 566.193 858.931 649.19C834.262 804.895 746.172 873.01 590.666 874.608C422.377 880.301 172.489 908.965 104.474 711.012C76.5092 599.452 86.6964 481.1 88.1946 366.843C98.9811 200.75 163.301 90.2882 342.277 86.6927ZM715.411 596.156C758.856 591.362 754.362 524.645 710.816 524.545C610.542 525.244 639.605 550.513 594.462 456.83C577.383 418.778 540.529 337.279 496.085 396.006C479.206 431.062 516.359 464.121 528.844 495.382C569.892 560.6 606.647 628.515 648.494 693.334C667.77 724.495 716.509 696.73 697.333 663.372C685.048 642.298 677.258 619.726 665.773 598.253C682.452 597.854 698.831 598.053 715.411 596.156Z" /> <path d="M342.277 86.6927C463.326 84.6952 587.87 65.619 705.523 104.97C830.467 143.522 874.012 278.153 872.814 397.105C873.713 481.299 874.012 566.193 858.931 649.19C834.262 804.895 746.172 873.01 590.666 874.608C422.377 880.301 172.489 908.965 104.474 711.012C76.5092 599.452 86.6964 481.1 88.1946 366.843C98.9811 200.75 163.301 90.2882 342.277 86.6927ZM715.411 596.156C758.856 591.362 754.362 524.645 710.816 524.545C610.542 525.244 639.605 550.513 594.462 456.83C577.383 418.778 540.529 337.279 496.085 396.006C479.206 431.062 516.359 464.121 528.844 495.382C569.892 560.6 606.647 628.515 648.494 693.334C667.77 724.495 716.509 696.73 697.333 663.372C685.048 642.298 677.258 619.726 665.773 598.253C682.452 597.854 698.831 598.053 715.411 596.156Z" />
<path d="M697.234 663.371C716.41 696.729 667.671 724.494 648.395 693.333C606.548 628.614 569.794 560.699 528.745 495.381C516.161 464.219 479.107 431.161 495.986 396.005C540.43 337.178 577.384 418.776 594.363 456.829C639.506 550.512 610.443 525.243 710.717 524.544C754.263 524.644 758.757 591.361 715.312 596.155C698.732 598.052 682.453 597.852 665.674 598.252C677.159 619.725 684.95 642.297 697.234 663.371Z" fill="black" /> <path
<path d="M474.312 257.679C486.597 230.913 517.059 198.453 545.224 224.92C564.3 242.298 551.316 269.465 538.332 287.242C489.194 363.747 450.242 445.844 405.598 524.845C445.448 528.341 485.598 525.844 525.149 532.835C564.1 539.827 558.907 597.455 519.256 598.353C442.153 601.35 365.049 595.457 287.845 599.652C260.28 597.554 225.024 612.336 203.751 589.065C161.104 516.456 275.761 527.442 317.608 524.546C343.776 499.377 356.659 456.93 377.833 425.769C395.311 394.608 412.39 363.147 429.868 331.986C432.964 322.199 418.982 314.109 415.486 305.12C349.169 230.713 442.153 172.885 474.312 257.679Z" fill="black" /> d="M697.234 663.371C716.41 696.729 667.671 724.494 648.395 693.333C606.548 628.614 569.794 560.699 528.745 495.381C516.161 464.219 479.107 431.161 495.986 396.005C540.43 337.178 577.384 418.776 594.363 456.829C639.506 550.512 610.443 525.243 710.717 524.544C754.263 524.644 758.757 591.361 715.312 596.155C698.732 598.052 682.453 597.852 665.674 598.252C677.159 619.725 684.95 642.297 697.234 663.371Z"
<path d="M265.471 626.12C284.647 595.758 329.491 609.042 330.39 643.199C325.296 664.872 313.511 684.647 298.53 701.027C275.758 724.997 235.009 703.124 242.5 670.864C246.195 654.485 256.882 640.302 265.471 626.12Z" fill="black" /> fill="black"
/>
<path
d="M474.312 257.679C486.597 230.913 517.059 198.453 545.224 224.92C564.3 242.298 551.316 269.465 538.332 287.242C489.194 363.747 450.242 445.844 405.598 524.845C445.448 528.341 485.598 525.844 525.149 532.835C564.1 539.827 558.907 597.455 519.256 598.353C442.153 601.35 365.049 595.457 287.845 599.652C260.28 597.554 225.024 612.336 203.751 589.065C161.104 516.456 275.761 527.442 317.608 524.546C343.776 499.377 356.659 456.93 377.833 425.769C395.311 394.608 412.39 363.147 429.868 331.986C432.964 322.199 418.982 314.109 415.486 305.12C349.169 230.713 442.153 172.885 474.312 257.679Z"
fill="black"
/>
<path
d="M265.471 626.12C284.647 595.758 329.491 609.042 330.39 643.199C325.296 664.872 313.511 684.647 298.53 701.027C275.758 724.997 235.009 703.124 242.5 670.864C246.195 654.485 256.882 640.302 265.471 626.12Z"
fill="black"
/>
</svg> </svg>
) )
} }
function GooglePlayIcon(props: React.SVGProps<SVGSVGElement>) { function GooglePlayIcon(props: React.SVGProps<SVGSVGElement>) {
return ( return (
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.99 31.99" aria-hidden="true" {...props}>
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 28.99 31.99"
aria-hidden="true"
{...props}
>
<path d="M13.54 15.28.12 29.34a3.66 3.66 0 0 0 5.33 2.16l15.1-8.6Z" fill="#ea4335" /> <path d="M13.54 15.28.12 29.34a3.66 3.66 0 0 0 5.33 2.16l15.1-8.6Z" fill="#ea4335" />
<path d="m27.11 12.89-6.53-3.74-7.35 6.45 7.38 7.28 6.48-3.7a3.54 3.54 0 0 0 1.5-4.79 3.62 3.62 0 0 0-1.5-1.5z" fill="#fbbc04" /> <path
<path d="M.12 2.66a3.57 3.57 0 0 0-.12.92v24.84a3.57 3.57 0 0 0 .12.92L14 15.64Z" fill="#4285f4" /> d="m27.11 12.89-6.53-3.74-7.35 6.45 7.38 7.28 6.48-3.7a3.54 3.54 0 0 0 1.5-4.79 3.62 3.62 0 0 0-1.5-1.5z"
<path d="m13.64 16 6.94-6.85L5.5.51A3.73 3.73 0 0 0 3.63 0 3.64 3.64 0 0 0 .12 2.65Z" fill="#34a853" /> fill="#fbbc04"
/>
<path
d="M.12 2.66a3.57 3.57 0 0 0-.12.92v24.84a3.57 3.57 0 0 0 .12.92L14 15.64Z"
fill="#4285f4"
/>
<path
d="m13.64 16 6.94-6.85L5.5.51A3.73 3.73 0 0 0 3.63 0 3.64 3.64 0 0 0 .12 2.65Z"
fill="#34a853"
/>
</svg> </svg>
) )
} }
@@ -330,13 +324,7 @@ function GlobeIcon(props: React.SVGProps<SVGSVGElement>) {
) )
} }
function Step({ function Step({ number, children }: { number: number; children: React.ReactNode }) {
number,
children,
}: {
number: number
children: React.ReactNode
}) {
return ( return (
<div className="flex gap-4"> <div className="flex gap-4">
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center text-xs font-medium"> <span className="flex-shrink-0 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center text-xs font-medium">
@@ -400,22 +388,19 @@ function Story() {
<h2 className="text-2xl font-medium">Background</h2> <h2 className="text-2xl font-medium">Background</h2>
<div className="space-y-4 text-sm text-white/60"> <div className="space-y-4 text-sm text-white/60">
<p> <p>
I started using Claude Code soon after it launched, often on my phone I started using Claude Code soon after it launched, often on my phone while going on walks
while going on walks to spend less time at my desk. I'd SSH into Tmux to spend less time at my desk. I'd SSH into Tmux from my phone. It worked, but the UX was
from my phone. It worked, but the UX was rough. Dictation was bad, the rough. Dictation was bad, the virtual keyboard was awkward, and the TUI would randomly
virtual keyboard was awkward, and the TUI would randomly start start flickering, which forced me to start over very often.
flickering, which forced me to start over very often.
</p> </p>
<p> <p>
I started building a simple app to manage agents via voice. I continued I started building a simple app to manage agents via voice. I continued adding features as
adding features as I needed them, and it slowly turned into what Paseo I needed them, and it slowly turned into what Paseo is today.
is today.
</p> </p>
<p> <p>
Anthropic and OpenAI added coding agents to their mobile apps since I Anthropic and OpenAI added coding agents to their mobile apps since I started working on
started working on this, but they force you into cloud sandboxes where this, but they force you into cloud sandboxes where you lose your whole setup. I also like
you lose your whole setup. I also like testing different agents, so testing different agents, so locking myself to a single harness or model wasn't an option.
locking myself to a single harness or model wasn't an option.
</p> </p>
</div> </div>
</div> </div>
@@ -428,55 +413,39 @@ function FAQ() {
<h2 className="text-2xl font-medium">FAQ</h2> <h2 className="text-2xl font-medium">FAQ</h2>
<div className="space-y-6"> <div className="space-y-6">
<FAQItem question="Is this free?"> <FAQItem question="Is this free?">
Paseo is free and open source. It wraps CLI tools like Claude Code and Paseo is free and open source. It wraps CLI tools like Claude Code and Codex, which you'll
Codex, which you'll need to have installed and configured with your need to have installed and configured with your own credentials. Voice is local-first by
own credentials. Voice is local-first by default and can optionally use default and can optionally use OpenAI speech providers if you configure them.
OpenAI speech providers if you configure them.
</FAQItem> </FAQItem>
<FAQItem question="Does my code leave my machine?"> <FAQItem question="Does my code leave my machine?">
Paseo itself doesn't send your code anywhere. Agents run locally and Paseo itself doesn't send your code anywhere. Agents run locally and communicate with
communicate with their own APIs as they normally would. We provide an their own APIs as they normally would. We provide an optional end-to-end encrypted relay
optional end-to-end encrypted relay for remote access, but you can for remote access, but you can also connect directly over your local network or use your
also connect directly over your local network or use your own tunnel. own tunnel.
</FAQItem>
<FAQItem question="What agents does it support?">
Claude Code, Codex, and OpenCode.
</FAQItem> </FAQItem>
<FAQItem question="What agents does it support?">Claude Code, Codex, and OpenCode.</FAQItem>
<FAQItem question="What's the business model?">There isn't one.</FAQItem> <FAQItem question="What's the business model?">There isn't one.</FAQItem>
<FAQItem question="Isn't this just more screen time?"> <FAQItem question="Isn't this just more screen time?">
I won't pretend this can't be misused to squeeze every minute of your I won't pretend this can't be misused to squeeze every minute of your day into work. But
day into work. But for me it means less time at my desk, not more. I for me it means less time at my desk, not more. I brainstorm whole features with voice. I
brainstorm whole features with voice. I kick off work at my desk, then kick off work at my desk, then check in from my phone during a walk. I see what an agent
check in from my phone during a walk. I see what an agent needs, send needs, send a voice reply, and put my phone away.
a voice reply, and put my phone away.
</FAQItem>
<FAQItem question="What does Paseo mean?">
Stroll, in Spanish. 🚶‍♂️
</FAQItem> </FAQItem>
<FAQItem question="What does Paseo mean?">Stroll, in Spanish. 🚶‍♂️</FAQItem>
</div> </div>
</div> </div>
) )
} }
function FAQItem({ function FAQItem({ question, children }: { question: string; children: React.ReactNode }) {
question,
children,
}: {
question: string
children: React.ReactNode
}) {
return ( return (
<details className="group"> <details className="group">
<summary className="font-medium text-sm cursor-pointer list-none flex items-start gap-2"> <summary className="font-medium text-sm cursor-pointer list-none flex items-start gap-2">
<span className="font-mono text-white/40 group-open:hidden">+</span> <span className="font-mono text-white/40 group-open:hidden">+</span>
<span className="font-mono text-white/40 hidden group-open:inline"> <span className="font-mono text-white/40 hidden group-open:inline">-</span>
-
</span>
{question} {question}
</summary> </summary>
<div className="text-sm text-white/60 space-y-2 mt-2 ml-4"> <div className="text-sm text-white/60 space-y-2 mt-2 ml-4">{children}</div>
{children}
</div>
</details> </details>
) )
} }