-
Notifications
You must be signed in to change notification settings - Fork 607
[feat] Show sessions and replay a transcript on mobile (6/12) #5685
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
ardaerzin
wants to merge
10
commits into
feat/mobile-device-gate
Choose a base branch
from
feat/mobile-sessions-and-transcript
base: feat/mobile-device-gate
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
a266eed
feat(mobile): wire @agenta/* workspace packages into the mobile app
ardaerzin cba971c
chore(mobile): mount and bake @agenta/* packages for the web-mobile c…
ardaerzin f3f1499
feat(mobile): app providers, sdk host pinning, and route-scoped proje…
ardaerzin 13a9bb5
feat(mobile): workspace and project resolution at the mobile root
ardaerzin 822eeb0
feat(mobile): sessions list with search and windowed paging
ardaerzin a3ee7bc
feat(mobile): read-only session transcript replay
ardaerzin 474e820
fix(mobile): review fixes for the sessions and transcript flows
ardaerzin 807b781
docs(mobile): commit the executed flows-lite plan
ardaerzin 268d646
fix(mobile): tell a failed first page apart from a failed later one
ardaerzin d0e8931
fix(mobile): keep build-time flags reachable in the deployed image
ardaerzin File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
382 changes: 382 additions & 0 deletions
382
docs/design/agenta-mobile/plans/2026-07-26-mobile-flows-lite.md
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import type {PropsWithChildren} from "react" | ||
|
|
||
| import {configureAgentaSdk} from "@agenta/sdk/config" | ||
| import {QueryClientProvider} from "@tanstack/react-query" | ||
| import {Provider, getDefaultStore} from "jotai" | ||
| import {useHydrateAtoms} from "jotai/react/utils" | ||
| import {queryClientAtom} from "jotai-tanstack-query" | ||
|
|
||
| import {getApiUrl} from "@/lib/env" | ||
| import {queryClient} from "@/lib/queryClient" | ||
|
|
||
| import {ContextSync} from "./ContextSync" | ||
|
|
||
| // Module scope, like the desktop _app: __env.js is beforeInteractive, so | ||
| // window.__env is already populated when this module first evaluates. | ||
| configureAgentaSdk({host: getApiUrl()}) | ||
|
|
||
| const HydrateAtoms = ({children}: PropsWithChildren) => { | ||
| useHydrateAtoms([[queryClientAtom, queryClient]]) | ||
| return children | ||
| } | ||
|
|
||
| export const AppProviders = ({children}: PropsWithChildren) => ( | ||
| <QueryClientProvider client={queryClient}> | ||
| {/* default store — @agenta/chat's loadSessionMessages writes through getDefaultStore() */} | ||
| <Provider store={getDefaultStore()}> | ||
| <HydrateAtoms> | ||
| <ContextSync /> | ||
| {children} | ||
| </HydrateAtoms> | ||
| </Provider> | ||
| </QueryClientProvider> | ||
| ) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import {useEffect} from "react" | ||
|
|
||
| import {setProjectIdAtom} from "@agenta/shared/state" | ||
| import {useSetAtom} from "jotai" | ||
| import {useRouter} from "next/router" | ||
|
|
||
| import {writeLastContext} from "@/lib/context" | ||
|
|
||
| /** Null-rendering: mirrors route params into the shared state @agenta/entities reads. */ | ||
| export const ContextSync = () => { | ||
| const router = useRouter() | ||
| const setProjectId = useSetAtom(setProjectIdAtom) | ||
|
|
||
| const {workspace_id, project_id} = router.query | ||
| const workspaceId = typeof workspace_id === "string" ? workspace_id : null | ||
| const projectId = typeof project_id === "string" ? project_id : null | ||
|
|
||
| useEffect(() => { | ||
| if (!router.isReady) return | ||
| setProjectId(projectId) | ||
| }, [router.isReady, projectId, setProjectId]) | ||
|
|
||
| useEffect(() => { | ||
| if (workspaceId && projectId) { | ||
| writeLastContext({workspaceId, projectId}) | ||
| } | ||
| }, [workspaceId, projectId]) | ||
|
|
||
| return null | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import {fetchSessionStream} from "@agenta/entities/session" | ||
| import {useQuery} from "@tanstack/react-query" | ||
| import Link from "next/link" | ||
|
|
||
| export const ChatHeader = ({ | ||
| sessionId, | ||
| projectId, | ||
| workspaceId, | ||
| }: { | ||
| sessionId: string | ||
| projectId: string | ||
| workspaceId: string | ||
| }) => { | ||
| const query = useQuery({ | ||
| queryKey: ["mobile", "session-stream", projectId, sessionId], | ||
| queryFn: () => fetchSessionStream({sessionId, projectId}), | ||
| enabled: Boolean(projectId && sessionId), | ||
| staleTime: 30_000, | ||
| }) | ||
| return ( | ||
| <header className="border-border flex flex-col gap-1 border-b p-4"> | ||
| <div className="flex items-center gap-2"> | ||
| <Link | ||
| href={`/w/${workspaceId}/p/${projectId}/sessions`} | ||
| className="text-muted-foreground shrink-0 text-xs underline underline-offset-4" | ||
| > | ||
| Back | ||
| </Link> | ||
| <h1 className="truncate text-sm font-semibold">{query.data?.name ?? "Session"}</h1> | ||
| </div> | ||
| <p className="text-muted-foreground text-xs"> | ||
| Read-only on mobile for now — continue this session on desktop. | ||
| </p> | ||
| </header> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import {useMemo} from "react" | ||
|
|
||
| import {buildTurnViewModels, createExecutedToolIdentityCache} from "@agenta/chat/model" | ||
|
|
||
| import {ChatHeader} from "./ChatHeader" | ||
| import {ChatEmpty, ChatLoading} from "./states/ChatStates" | ||
| import {TurnRow} from "./TurnRow" | ||
| import {useSessionTranscript} from "./useSessionTranscript" | ||
|
|
||
| /** Read-only replay screen — mount it with `key={sessionId}` so per-session state resets. */ | ||
| export const ChatScreen = ({ | ||
| sessionId, | ||
| projectId, | ||
| workspaceId, | ||
| }: { | ||
| sessionId: string | ||
| projectId: string | ||
| workspaceId: string | ||
| }) => { | ||
| const {messages, state} = useSessionTranscript(sessionId) | ||
| // One identity cache per session mount (the screen is keyed by sessionId). | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| const executedFor = useMemo(() => createExecutedToolIdentityCache(), [sessionId]) | ||
| const turns = useMemo( | ||
| () => buildTurnViewModels(messages, {busy: false, executedFor}), | ||
| [messages, executedFor], | ||
| ) | ||
|
|
||
| let body | ||
| if (state === "loading") { | ||
| body = <ChatLoading /> | ||
| } else if (state === "empty") { | ||
| body = <ChatEmpty /> | ||
| } else { | ||
| body = ( | ||
| <div className="flex grow flex-col gap-3 p-4"> | ||
| {turns | ||
| .filter((turn) => !turn.hidden) | ||
| .map((turn) => ( | ||
| <TurnRow key={turn.message.id} turn={turn} /> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="bg-background text-foreground flex min-h-dvh flex-col"> | ||
| <ChatHeader sessionId={sessionId} projectId={projectId} workspaceId={workspaceId} /> | ||
| {body} | ||
| </div> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import {partToolName, rowSummary, type TurnViewModel} from "@agenta/chat/model" | ||
|
|
||
| /** One transcript turn: raw aligned text parts, one-line tool summaries, raw error line. */ | ||
| export const TurnRow = ({turn}: {turn: TurnViewModel}) => ( | ||
| <div className={`flex ${turn.isUser ? "justify-end" : "justify-start"}`}> | ||
| <div | ||
| className={`flex max-w-[85%] flex-col gap-1 ${turn.isUser ? "items-end" : "items-start"}`} | ||
| > | ||
| {turn.items.map((item) => { | ||
| if (item.kind === "part") { | ||
| if (item.part.type === "text") { | ||
| return ( | ||
| <p key={item.index} className="whitespace-pre-wrap text-xs"> | ||
| {item.part.text} | ||
| </p> | ||
| ) | ||
| } | ||
| if (item.part.type === "reasoning") { | ||
| return ( | ||
| <p | ||
| key={item.index} | ||
| className="text-muted-foreground whitespace-pre-wrap text-xs italic" | ||
| > | ||
| {item.part.text} | ||
| </p> | ||
| ) | ||
| } | ||
| return null | ||
| } | ||
| if (item.kind === "tools") { | ||
| return ( | ||
| <div key={item.index} className="flex flex-col gap-0.5"> | ||
| {item.parts.map((part, i) => { | ||
| const summary = rowSummary(part) | ||
| return ( | ||
| <p | ||
| key={part.toolCallId ?? `${item.index}-${i}`} | ||
| className="text-muted-foreground text-xs" | ||
| > | ||
| {partToolName(part)} — {part.state ?? "pending"} | ||
| {summary ? ` · ${summary}` : ""} | ||
| </p> | ||
| ) | ||
| })} | ||
| </div> | ||
| ) | ||
| } | ||
| // clientTool never occurs — the predicate defaults to false on mobile. | ||
| return null | ||
| })} | ||
| {turn.status.showError ? ( | ||
| <p className="text-destructive text-xs"> | ||
| {turn.status.errorText ?? "Something went wrong."} | ||
| </p> | ||
| ) : null} | ||
| </div> | ||
| </div> | ||
| ) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| // Raw one-liner states for the LITE phase (designed states come with the skin pass). | ||
|
|
||
| export const ChatLoading = () => ( | ||
| <p className="text-muted-foreground grow p-6 text-center text-xs">Loading…</p> | ||
| ) | ||
|
|
||
| /** Also covers history-unavailable — loadSessionMessages resolves null for both. */ | ||
| export const ChatEmpty = () => ( | ||
| <p className="text-muted-foreground grow p-6 text-center text-xs"> | ||
| No messages here — this session has no replayable history. | ||
| </p> | ||
| ) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import {useEffect, useState} from "react" | ||
|
|
||
| import {loadSessionMessages} from "@agenta/chat/assets" | ||
| import type {UIMessage} from "ai" | ||
|
|
||
| /** | ||
| * Read-only transcript for one session: server record replay via `loadSessionMessages` | ||
| * (IndexedDB-restored, revalidation re-delivered through `onRefreshed`). `null` history | ||
| * collapses into "empty" — raw text covers both no-messages and history-unavailable. | ||
| */ | ||
| export const useSessionTranscript = (sessionId: string) => { | ||
| const [messages, setMessages] = useState<UIMessage[]>([]) | ||
| const [state, setState] = useState<"loading" | "ready" | "empty">("loading") | ||
| useEffect(() => { | ||
| let cancelled = false | ||
| let refreshed = false | ||
| setState("loading") | ||
| setMessages([]) | ||
| void loadSessionMessages(sessionId, (fresh) => { | ||
| // Disk-restore revalidation re-delivery — fresh is non-empty by contract. | ||
| if (cancelled) return | ||
| refreshed = true | ||
| setMessages(fresh) | ||
| setState("ready") | ||
| }).then((msgs) => { | ||
| // A fast revalidation can beat this one-shot resolve; never clobber it. | ||
| if (cancelled || refreshed) return | ||
| setMessages(msgs ?? []) | ||
| setState(msgs && msgs.length > 0 ? "ready" : "empty") | ||
| }) | ||
| return () => { | ||
| cancelled = true | ||
| } | ||
| }, [sessionId]) | ||
| return {messages, state} | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
Use TanStack Query instead of manual
useEffectfetching.This hook fetches data with
useEffectand manualuseStatetracking. WraploadSessionMessagesin auseQuery/atomWithQuerycall instead, and use the refresh callback to update the query cache (for example throughqueryClient.setQueryData). This restores native loading/error/retry semantics and keeps the hook consistent with the rest of the codebase.As per coding guidelines: "Use
atomWithQuerywith TanStack Query for API data fetching ... Do not useuseEffectwith manual fetching or introduce SWR+axios for new features."Source: Coding guidelines
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
Add error handling to the transcript load.
loadSessionMessages(...).then(...)has no.catch(). If the promise rejects,statestays"loading"indefinitely, and the rejection goes unhandled. The user sees an infinite spinner with no retry option on a transient failure.Add an
"error"state and a.catch()handler, and surface a retry action fromChatScreen.🐛 Proposed fix