1080 lines
32 KiB
TypeScript
1080 lines
32 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { ActivityIndicator, Platform, Text, View } from "react-native";
|
|
import ReanimatedAnimated from "react-native-reanimated";
|
|
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
|
import { Bot } from "lucide-react-native";
|
|
import invariant from "tiny-invariant";
|
|
import { AgentStreamView, type AgentStreamViewHandle } from "@/components/agent-stream-view";
|
|
import { AgentInputArea } from "@/components/agent-input-area";
|
|
import { ArchivedAgentCallout } from "@/components/archived-agent-callout";
|
|
import { FileDropZone } from "@/components/file-drop-zone";
|
|
import type { ImageAttachment } from "@/components/message-input";
|
|
import { ToastViewport, useToastHost } from "@/components/toast-host";
|
|
import { ClaudeIcon } from "@/components/icons/claude-icon";
|
|
import { CodexIcon } from "@/components/icons/codex-icon";
|
|
import { useAgentAttentionClear } from "@/hooks/use-agent-attention-clear";
|
|
import { useAgentInitialization } from "@/hooks/use-agent-initialization";
|
|
import {
|
|
useAgentScreenStateMachine,
|
|
type AgentScreenMissingState,
|
|
} from "@/hooks/use-agent-screen-state-machine";
|
|
import { useArchiveAgent } from "@/hooks/use-archive-agent";
|
|
import { useDelayedHistoryRefreshToast } from "@/hooks/use-delayed-history-refresh-toast";
|
|
import { useAgentInputDraft } from "@/hooks/use-agent-input-draft";
|
|
import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
|
|
import { usePaneContext } from "@/panels/pane-context";
|
|
import type { PanelDescriptor, PanelRegistration } from "@/panels/panel-registry";
|
|
import {
|
|
useHostRuntimeClient,
|
|
useHostRuntimeConnectionStatus,
|
|
useHostRuntimeIsConnected,
|
|
useHostRuntimeLastError,
|
|
useHosts,
|
|
type HostRuntimeConnectionStatus,
|
|
} from "@/runtime/host-runtime";
|
|
import {
|
|
getInitDeferred,
|
|
getInitKey,
|
|
} from "@/utils/agent-initialization";
|
|
import {
|
|
derivePendingPermissionKey,
|
|
normalizeAgentSnapshot,
|
|
} from "@/utils/agent-snapshots";
|
|
import { mergePendingCreateImages } from "@/utils/pending-create-images";
|
|
import { deriveSidebarStateBucket } from "@/utils/sidebar-agent-state";
|
|
import { useCreateFlowStore } from "@/stores/create-flow-store";
|
|
import { buildDraftStoreKey } from "@/stores/draft-keys";
|
|
import { useSessionStore, type Agent } from "@/stores/session-store";
|
|
import type { PendingPermission } from "@/types/shared";
|
|
import type { StreamItem } from "@/types/stream";
|
|
import {
|
|
deriveRouteBottomAnchorIntent,
|
|
deriveRouteBottomAnchorRequest,
|
|
} from "@/screens/agent/agent-ready-screen-bottom-anchor";
|
|
|
|
function formatProviderLabel(provider: Agent["provider"]): string {
|
|
if (provider === "claude") {
|
|
return "Claude";
|
|
}
|
|
if (provider === "codex") {
|
|
return "Codex";
|
|
}
|
|
if (!provider) {
|
|
return "Agent";
|
|
}
|
|
return provider.charAt(0).toUpperCase() + provider.slice(1);
|
|
}
|
|
|
|
function resolveWorkspaceAgentTabLabel(title: string | null | undefined): string | null {
|
|
if (typeof title !== "string") {
|
|
return null;
|
|
}
|
|
const normalized = title.trim();
|
|
if (!normalized) {
|
|
return null;
|
|
}
|
|
if (normalized.toLowerCase() === "new agent") {
|
|
return null;
|
|
}
|
|
return normalized;
|
|
}
|
|
|
|
function useAgentPanelDescriptor(
|
|
target: { kind: "agent"; agentId: string },
|
|
context: { serverId: string }
|
|
): PanelDescriptor {
|
|
const agent = useSessionStore(
|
|
(state) => state.sessions[context.serverId]?.agents?.get(target.agentId) ?? null
|
|
);
|
|
const provider = agent?.provider ?? "codex";
|
|
const label = resolveWorkspaceAgentTabLabel(agent?.title);
|
|
const icon = provider === "claude" ? ClaudeIcon : provider === "codex" ? CodexIcon : Bot;
|
|
|
|
return {
|
|
label: label ?? "",
|
|
subtitle: `${formatProviderLabel(provider)} agent`,
|
|
titleState: label ? "ready" : "loading",
|
|
icon,
|
|
statusBucket: agent
|
|
? deriveSidebarStateBucket({
|
|
status: agent.status,
|
|
pendingPermissionCount: agent.pendingPermissions.length,
|
|
requiresAttention: agent.requiresAttention,
|
|
attentionReason: agent.attentionReason,
|
|
})
|
|
: null,
|
|
};
|
|
}
|
|
|
|
function AgentPanel() {
|
|
const { serverId, target, isPaneFocused, openFileInWorkspace } = usePaneContext();
|
|
invariant(target.kind === "agent", "AgentPanel requires agent target");
|
|
const handleOpenWorkspaceFile = useCallback(
|
|
(input: { filePath: string }) => {
|
|
openFileInWorkspace(input.filePath);
|
|
},
|
|
[openFileInWorkspace]
|
|
);
|
|
return (
|
|
<AgentPanelContent
|
|
serverId={serverId}
|
|
agentId={target.agentId}
|
|
isPaneFocused={isPaneFocused}
|
|
onOpenWorkspaceFile={handleOpenWorkspaceFile}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export const agentPanelRegistration: PanelRegistration<"agent"> = {
|
|
kind: "agent",
|
|
component: AgentPanel,
|
|
useDescriptor: useAgentPanelDescriptor,
|
|
};
|
|
|
|
const EMPTY_STREAM_ITEMS: StreamItem[] = [];
|
|
|
|
function logWebStickyBottom(
|
|
_event: string,
|
|
_details: Record<string, unknown>
|
|
): void {}
|
|
|
|
function toErrorMessage(error: unknown): string {
|
|
if (error instanceof Error) {
|
|
return error.message;
|
|
}
|
|
return String(error);
|
|
}
|
|
|
|
function isNotFoundErrorMessage(message: string): boolean {
|
|
return /agent not found|not found/i.test(message);
|
|
}
|
|
|
|
function AgentPanelContent({
|
|
serverId,
|
|
agentId,
|
|
isPaneFocused,
|
|
onOpenWorkspaceFile,
|
|
}: {
|
|
serverId: string;
|
|
agentId: string;
|
|
isPaneFocused: boolean;
|
|
onOpenWorkspaceFile?: (input: { filePath: string }) => void;
|
|
}) {
|
|
const resolvedAgentId = agentId.trim() || undefined;
|
|
const resolvedServerId = serverId.trim() || undefined;
|
|
const daemons = useHosts();
|
|
const runtimeServerId = resolvedServerId ?? "";
|
|
const runtimeClient = useHostRuntimeClient(runtimeServerId);
|
|
const runtimeIsConnected = useHostRuntimeIsConnected(runtimeServerId);
|
|
const runtimeConnectionStatus = useHostRuntimeConnectionStatus(runtimeServerId);
|
|
const runtimeLastError = useHostRuntimeLastError(runtimeServerId);
|
|
|
|
const connectionServerId = resolvedServerId ?? null;
|
|
const daemon = connectionServerId
|
|
? daemons.find((entry) => entry.serverId === connectionServerId) ?? null
|
|
: null;
|
|
const serverLabel =
|
|
daemon?.label ?? connectionServerId ?? "Selected host";
|
|
const isUnknownDaemon = Boolean(connectionServerId && !daemon);
|
|
const connectionStatus: HostRuntimeConnectionStatus =
|
|
isUnknownDaemon && runtimeConnectionStatus === "connecting"
|
|
? "offline"
|
|
: runtimeConnectionStatus;
|
|
const lastConnectionError = runtimeLastError;
|
|
|
|
if (!resolvedServerId || !runtimeClient) {
|
|
return (
|
|
<AgentSessionUnavailableState
|
|
serverLabel={serverLabel}
|
|
connectionStatus={connectionStatus}
|
|
lastError={lastConnectionError}
|
|
isUnknownDaemon={isUnknownDaemon}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AgentPanelBody
|
|
serverId={resolvedServerId}
|
|
agentId={resolvedAgentId}
|
|
isPaneFocused={isPaneFocused}
|
|
client={runtimeClient}
|
|
isConnected={runtimeIsConnected}
|
|
connectionStatus={connectionStatus}
|
|
onOpenWorkspaceFile={onOpenWorkspaceFile}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function AgentPanelBody({
|
|
serverId,
|
|
agentId,
|
|
isPaneFocused,
|
|
client,
|
|
isConnected,
|
|
connectionStatus,
|
|
onOpenWorkspaceFile,
|
|
}: {
|
|
serverId: string;
|
|
agentId?: string;
|
|
isPaneFocused: boolean;
|
|
client: NonNullable<ReturnType<typeof useHostRuntimeClient>>;
|
|
isConnected: boolean;
|
|
connectionStatus: HostRuntimeConnectionStatus;
|
|
onOpenWorkspaceFile?: (input: { filePath: string }) => void;
|
|
}) {
|
|
const { theme } = useUnistyles();
|
|
const panelToast = useToastHost();
|
|
const { isArchivingAgent } = useArchiveAgent();
|
|
const streamViewRef = useRef<AgentStreamViewHandle>(null);
|
|
const addImagesRef = useRef<((images: ImageAttachment[]) => void) | null>(null);
|
|
const clearOnAgentBlurRef = useRef<() => void>(() => {});
|
|
const wasPaneFocusedRef = useRef(isPaneFocused);
|
|
const reconnectToastArmedRef = useRef(false);
|
|
const initAttemptTokenRef = useRef(0);
|
|
const routeBottomAnchorRequestRef = useRef<{
|
|
routeKey: string;
|
|
reason: "initial-entry" | "resume";
|
|
} | null>(null);
|
|
const agentInputDraft = useAgentInputDraft(
|
|
buildDraftStoreKey({
|
|
serverId,
|
|
agentId: agentId ?? "__pending__",
|
|
})
|
|
);
|
|
|
|
const handleFilesDropped = useCallback((files: ImageAttachment[]) => {
|
|
addImagesRef.current?.(files);
|
|
}, []);
|
|
|
|
const handleAddImagesCallback = useCallback(
|
|
(addImages: (images: ImageAttachment[]) => void) => {
|
|
addImagesRef.current = addImages;
|
|
},
|
|
[]
|
|
);
|
|
|
|
const agent = useSessionStore((state) =>
|
|
agentId ? state.sessions[serverId]?.agents?.get(agentId) : undefined
|
|
);
|
|
const streamItemsRaw = useSessionStore((state) =>
|
|
agentId
|
|
? state.sessions[serverId]?.agentStreamTail?.get(agentId)
|
|
: undefined
|
|
);
|
|
const streamItems = streamItemsRaw ?? EMPTY_STREAM_ITEMS;
|
|
const pendingByDraftId = useCreateFlowStore((state) => state.pendingByDraftId);
|
|
const markPendingCreateLifecycle = useCreateFlowStore(
|
|
(state) => state.markLifecycle
|
|
);
|
|
const clearPendingCreate = useCreateFlowStore((state) => state.clear);
|
|
const isInitializingFromMap = useSessionStore((state) =>
|
|
agentId
|
|
? state.sessions[serverId]?.initializingAgents?.get(agentId) ?? false
|
|
: false
|
|
);
|
|
const historySyncGeneration = useSessionStore(
|
|
(state) => state.sessions[serverId]?.historySyncGeneration ?? 0
|
|
);
|
|
const hasAppliedAuthoritativeHistory = useSessionStore((state) =>
|
|
agentId
|
|
? state.sessions[serverId]?.agentAuthoritativeHistoryApplied?.get(agentId) ===
|
|
true
|
|
: false
|
|
);
|
|
const agentHistorySyncGeneration = useSessionStore((state) =>
|
|
agentId
|
|
? state.sessions[serverId]?.agentHistorySyncGeneration?.get(agentId) ?? -1
|
|
: -1
|
|
);
|
|
const allPendingPermissions = useSessionStore(
|
|
(state) => state.sessions[serverId]?.pendingPermissions
|
|
);
|
|
const setAgents = useSessionStore((state) => state.setAgents);
|
|
const setAgentStreamTail = useSessionStore((state) => state.setAgentStreamTail);
|
|
const setPendingPermissions = useSessionStore(
|
|
(state) => state.setPendingPermissions
|
|
);
|
|
const hasSession = useSessionStore((state) => Boolean(state.sessions[serverId]));
|
|
const { ensureAgentIsInitialized } = useAgentInitialization({
|
|
serverId,
|
|
client: hasSession ? client : null,
|
|
});
|
|
const [missingAgentState, setMissingAgentState] = useState<AgentScreenMissingState>({
|
|
kind: "idle",
|
|
});
|
|
|
|
const pendingCreate = useMemo(() => {
|
|
if (!agentId) {
|
|
return null;
|
|
}
|
|
const values = Object.values(pendingByDraftId);
|
|
for (const entry of values) {
|
|
if (
|
|
entry.lifecycle === "active" &&
|
|
entry.serverId === serverId &&
|
|
entry.agentId === agentId
|
|
) {
|
|
return entry;
|
|
}
|
|
}
|
|
return null;
|
|
}, [agentId, pendingByDraftId, serverId]);
|
|
const isPendingCreateForPanel = Boolean(pendingCreate);
|
|
const hasHydratedHistoryBefore = hasAppliedAuthoritativeHistory;
|
|
|
|
const pendingPermissions = useMemo(() => {
|
|
if (!allPendingPermissions || !agentId) {
|
|
return new Map<string, PendingPermission>();
|
|
}
|
|
const filtered = new Map<string, PendingPermission>();
|
|
for (const [key, permission] of allPendingPermissions) {
|
|
if (permission.agentId === agentId) {
|
|
filtered.set(key, permission);
|
|
}
|
|
}
|
|
return filtered;
|
|
}, [agentId, allPendingPermissions]);
|
|
|
|
const attentionController = useAgentAttentionClear({
|
|
agentId,
|
|
client,
|
|
isConnected,
|
|
requiresAttention: agent?.requiresAttention,
|
|
attentionReason: agent?.attentionReason,
|
|
isScreenFocused: isPaneFocused,
|
|
});
|
|
useEffect(() => {
|
|
clearOnAgentBlurRef.current = attentionController.clearOnAgentBlur;
|
|
}, [attentionController.clearOnAgentBlur]);
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// DEBUG: track which selector values change between renders
|
|
// ---------------------------------------------------------------------------
|
|
const debugPrevRef = useRef<Record<string, unknown>>({});
|
|
useEffect(() => {
|
|
const prev = debugPrevRef.current;
|
|
const curr: Record<string, unknown> = {
|
|
agent,
|
|
"agent?.status": agent?.status,
|
|
"agent?.cwd": agent?.cwd,
|
|
"agent?.updatedAt": agent?.updatedAt,
|
|
"agent?.requiresAttention": agent?.requiresAttention,
|
|
streamItemsRaw,
|
|
"streamItems.length": streamItems.length,
|
|
allPendingPermissions,
|
|
isInitializingFromMap,
|
|
historySyncGeneration,
|
|
hasAppliedAuthoritativeHistory,
|
|
agentHistorySyncGeneration,
|
|
hasSession,
|
|
isPaneFocused,
|
|
isConnected,
|
|
};
|
|
const changed: string[] = [];
|
|
for (const key of Object.keys(curr)) {
|
|
if (!Object.is(prev[key], curr[key])) {
|
|
changed.push(key);
|
|
}
|
|
}
|
|
if (changed.length > 0 && Object.keys(prev).length > 0) {
|
|
console.log("[AgentPanelBody] values changed:", changed.join(", "), {
|
|
changed: Object.fromEntries(
|
|
changed.map((k) => [k, { prev: prev[k], curr: curr[k] }])
|
|
),
|
|
});
|
|
}
|
|
debugPrevRef.current = curr;
|
|
});
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const { style: animatedKeyboardStyle } = useKeyboardShiftStyle({
|
|
mode: "translate",
|
|
});
|
|
|
|
const handleHistorySyncFailure = useCallback(
|
|
({ origin, error }: { origin: "focus" | "entry"; error: unknown }) => {
|
|
if (agentId) {
|
|
console.warn("[AgentPanel] history sync failed", {
|
|
origin,
|
|
agentId,
|
|
error,
|
|
});
|
|
}
|
|
const message = toErrorMessage(error);
|
|
setMissingAgentState((previous) => {
|
|
if (previous.kind === "error" && previous.message === message) {
|
|
return previous;
|
|
}
|
|
return { kind: "error", message };
|
|
});
|
|
},
|
|
[agentId]
|
|
);
|
|
|
|
const ensureInitializedWithSyncErrorHandling = useCallback(
|
|
(origin: "focus" | "entry") => {
|
|
if (!agentId) {
|
|
return;
|
|
}
|
|
ensureAgentIsInitialized(agentId).catch((error) => {
|
|
handleHistorySyncFailure({ origin, error });
|
|
});
|
|
},
|
|
[agentId, ensureAgentIsInitialized, handleHistorySyncFailure]
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (connectionStatus === "online") {
|
|
reconnectToastArmedRef.current = false;
|
|
return;
|
|
}
|
|
if (connectionStatus === "idle") {
|
|
return;
|
|
}
|
|
if (!reconnectToastArmedRef.current) {
|
|
reconnectToastArmedRef.current = true;
|
|
panelToast.api.show("Reconnecting...", {
|
|
durationMs: 2200,
|
|
testID: "agent-reconnecting-toast",
|
|
});
|
|
}
|
|
}, [connectionStatus, panelToast.api]);
|
|
|
|
useEffect(() => {
|
|
if (!isPaneFocused || !agentId || !isConnected || !hasSession) {
|
|
return;
|
|
}
|
|
ensureInitializedWithSyncErrorHandling("focus");
|
|
}, [
|
|
agentId,
|
|
ensureInitializedWithSyncErrorHandling,
|
|
hasSession,
|
|
isConnected,
|
|
isPaneFocused,
|
|
]);
|
|
|
|
const isArchivingCurrentAgent = Boolean(
|
|
agentId &&
|
|
isArchivingAgent({ serverId, agentId })
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (wasPaneFocusedRef.current && !isPaneFocused) {
|
|
clearOnAgentBlurRef.current();
|
|
}
|
|
wasPaneFocusedRef.current = isPaneFocused;
|
|
}, [isPaneFocused]);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (wasPaneFocusedRef.current) {
|
|
clearOnAgentBlurRef.current();
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
const isInitializing = agentId ? isInitializingFromMap !== false : false;
|
|
const isHistorySyncing = useMemo(() => {
|
|
if (!agentId || !isInitializing) {
|
|
return false;
|
|
}
|
|
const initKey = getInitKey(serverId, agentId);
|
|
return Boolean(getInitDeferred(initKey));
|
|
}, [agentId, isInitializing, serverId]);
|
|
const needsAuthoritativeSync = useMemo(() => {
|
|
if (!agentId) {
|
|
return false;
|
|
}
|
|
return agentHistorySyncGeneration < historySyncGeneration;
|
|
}, [agentHistorySyncGeneration, agentId, historySyncGeneration]);
|
|
|
|
const optimisticStreamItems = useMemo<StreamItem[]>(() => {
|
|
if (!isPendingCreateForPanel || !pendingCreate) {
|
|
return EMPTY_STREAM_ITEMS;
|
|
}
|
|
return [
|
|
{
|
|
kind: "user_message",
|
|
id: pendingCreate.clientMessageId,
|
|
text: pendingCreate.text,
|
|
timestamp: new Date(pendingCreate.timestamp),
|
|
...(pendingCreate.images && pendingCreate.images.length > 0
|
|
? { images: pendingCreate.images }
|
|
: {}),
|
|
},
|
|
];
|
|
}, [isPendingCreateForPanel, pendingCreate]);
|
|
|
|
const mergedStreamItems = useMemo<StreamItem[]>(() => {
|
|
if (optimisticStreamItems.length === 0) {
|
|
return streamItems;
|
|
}
|
|
const optimistic = optimisticStreamItems[0];
|
|
if (!optimistic) {
|
|
return streamItems;
|
|
}
|
|
const alreadyHasOptimistic = streamItems.some(
|
|
(item) => item.kind === "user_message" && item.id === optimistic.id
|
|
);
|
|
return alreadyHasOptimistic ? streamItems : [...optimisticStreamItems, ...streamItems];
|
|
}, [optimisticStreamItems, streamItems]);
|
|
|
|
const shouldUseOptimisticStream =
|
|
isPendingCreateForPanel && optimisticStreamItems.length > 0;
|
|
const authoritativeStatus = agent?.status;
|
|
const isAuthoritativeBootstrapping =
|
|
authoritativeStatus === "initializing" || authoritativeStatus === "idle";
|
|
const showPendingCreateSubmitLoading =
|
|
isPendingCreateForPanel &&
|
|
(!authoritativeStatus || isAuthoritativeBootstrapping);
|
|
const canFinalizePendingCreate =
|
|
Boolean(authoritativeStatus) && !isAuthoritativeBootstrapping;
|
|
|
|
const placeholderAgent: Agent | null = useMemo(() => {
|
|
if (!shouldUseOptimisticStream || !agentId) {
|
|
return null;
|
|
}
|
|
const now = new Date();
|
|
return {
|
|
serverId,
|
|
id: agentId,
|
|
provider: "claude",
|
|
status: "running",
|
|
createdAt: now,
|
|
updatedAt: now,
|
|
lastUserMessageAt: now,
|
|
lastActivityAt: now,
|
|
capabilities: {
|
|
supportsStreaming: true,
|
|
supportsSessionPersistence: false,
|
|
supportsDynamicModes: false,
|
|
supportsMcpServers: false,
|
|
supportsReasoningStream: false,
|
|
supportsToolInvocations: false,
|
|
},
|
|
currentModeId: null,
|
|
availableModes: [],
|
|
pendingPermissions: [],
|
|
persistence: null,
|
|
runtimeInfo: {
|
|
provider: "claude",
|
|
sessionId: null,
|
|
model: null,
|
|
modeId: null,
|
|
},
|
|
title: "Agent",
|
|
cwd: ".",
|
|
model: null,
|
|
labels: {},
|
|
};
|
|
}, [agentId, serverId, shouldUseOptimisticStream]);
|
|
|
|
const viewState = useAgentScreenStateMachine({
|
|
routeKey: `${serverId}:${agentId ?? ""}`,
|
|
input: {
|
|
agent: agent ?? null,
|
|
placeholderAgent,
|
|
missingAgentState,
|
|
isConnected,
|
|
isArchivingCurrentAgent,
|
|
isHistorySyncing,
|
|
needsAuthoritativeSync,
|
|
shouldUseOptimisticStream,
|
|
hasHydratedHistoryBefore,
|
|
},
|
|
});
|
|
|
|
const effectiveAgent = viewState.tag === "ready" ? viewState.agent : null;
|
|
const routeEntryKey = agentId ? `${serverId}:${agentId}` : null;
|
|
routeBottomAnchorRequestRef.current = deriveRouteBottomAnchorIntent({
|
|
cachedIntent: routeBottomAnchorRequestRef.current,
|
|
routeKey: routeEntryKey,
|
|
hasAppliedAuthoritativeHistoryAtEntry: hasAppliedAuthoritativeHistory,
|
|
});
|
|
const routeBottomAnchorRequest = useMemo(
|
|
() =>
|
|
deriveRouteBottomAnchorRequest({
|
|
intent: routeBottomAnchorRequestRef.current,
|
|
effectiveAgentId: effectiveAgent?.id ?? null,
|
|
}),
|
|
[effectiveAgent?.id]
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!isPendingCreateForPanel || !pendingCreate) {
|
|
return;
|
|
}
|
|
const hasUserMessage = streamItems.some(
|
|
(item) =>
|
|
item.kind === "user_message" &&
|
|
item.id === pendingCreate.clientMessageId
|
|
);
|
|
if (hasUserMessage && canFinalizePendingCreate) {
|
|
if (
|
|
agentId &&
|
|
pendingCreate.images &&
|
|
pendingCreate.images.length > 0
|
|
) {
|
|
setAgentStreamTail(serverId, (previous) => {
|
|
const current = previous.get(agentId);
|
|
if (!current) {
|
|
return previous;
|
|
}
|
|
|
|
const merged = mergePendingCreateImages({
|
|
streamItems: current,
|
|
clientMessageId: pendingCreate.clientMessageId,
|
|
images: pendingCreate.images,
|
|
});
|
|
if (merged === current) {
|
|
return previous;
|
|
}
|
|
|
|
const next = new Map(previous);
|
|
next.set(agentId, merged);
|
|
return next;
|
|
});
|
|
}
|
|
markPendingCreateLifecycle({
|
|
draftId: pendingCreate.draftId,
|
|
lifecycle: "sent",
|
|
});
|
|
clearPendingCreate({ draftId: pendingCreate.draftId });
|
|
}
|
|
}, [
|
|
agentId,
|
|
canFinalizePendingCreate,
|
|
clearPendingCreate,
|
|
isPendingCreateForPanel,
|
|
markPendingCreateLifecycle,
|
|
pendingCreate,
|
|
serverId,
|
|
setAgentStreamTail,
|
|
streamItems,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
if (!agentId) {
|
|
return;
|
|
}
|
|
if (!isConnected || !hasSession) {
|
|
return;
|
|
}
|
|
const shouldSyncOnEntry = needsAuthoritativeSync || Platform.OS !== "web";
|
|
if (!shouldSyncOnEntry) {
|
|
return;
|
|
}
|
|
|
|
ensureInitializedWithSyncErrorHandling("entry");
|
|
}, [
|
|
agentId,
|
|
ensureInitializedWithSyncErrorHandling,
|
|
hasSession,
|
|
isConnected,
|
|
needsAuthoritativeSync,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
initAttemptTokenRef.current += 1;
|
|
setMissingAgentState({ kind: "idle" });
|
|
}, [agentId, serverId]);
|
|
|
|
useEffect(() => {
|
|
if (!agentId) {
|
|
return;
|
|
}
|
|
if (agent || shouldUseOptimisticStream) {
|
|
if (missingAgentState.kind !== "idle") {
|
|
setMissingAgentState({ kind: "idle" });
|
|
}
|
|
return;
|
|
}
|
|
if (!isConnected || !hasSession) {
|
|
return;
|
|
}
|
|
if (missingAgentState.kind === "resolving" || missingAgentState.kind === "not_found") {
|
|
return;
|
|
}
|
|
|
|
setMissingAgentState({ kind: "resolving" });
|
|
const attemptToken = ++initAttemptTokenRef.current;
|
|
|
|
ensureAgentIsInitialized(agentId)
|
|
.then(async () => {
|
|
if (attemptToken !== initAttemptTokenRef.current) {
|
|
return;
|
|
}
|
|
const currentAgent = useSessionStore
|
|
.getState()
|
|
.sessions[serverId]
|
|
?.agents.get(agentId);
|
|
if (!currentAgent) {
|
|
const result = await client.fetchAgent(agentId);
|
|
if (attemptToken !== initAttemptTokenRef.current) {
|
|
return;
|
|
}
|
|
if (!result) {
|
|
setMissingAgentState({
|
|
kind: "not_found",
|
|
message: `Agent not found: ${agentId}`,
|
|
});
|
|
return;
|
|
}
|
|
const normalized = normalizeAgentSnapshot(result.agent, serverId);
|
|
const hydrated = {
|
|
...normalized,
|
|
projectPlacement: result.project,
|
|
};
|
|
setAgents(serverId, (previous) => {
|
|
const next = new Map(previous);
|
|
next.set(hydrated.id, hydrated);
|
|
return next;
|
|
});
|
|
setPendingPermissions(serverId, (previous) => {
|
|
const next = new Map(previous);
|
|
for (const [key, pending] of next.entries()) {
|
|
if (pending.agentId === hydrated.id) {
|
|
next.delete(key);
|
|
}
|
|
}
|
|
for (const request of hydrated.pendingPermissions) {
|
|
const key = derivePendingPermissionKey(hydrated.id, request);
|
|
next.set(key, { key, agentId: hydrated.id, request });
|
|
}
|
|
return next;
|
|
});
|
|
}
|
|
if (attemptToken !== initAttemptTokenRef.current) {
|
|
return;
|
|
}
|
|
setMissingAgentState({ kind: "idle" });
|
|
})
|
|
.catch((error) => {
|
|
if (attemptToken !== initAttemptTokenRef.current) {
|
|
return;
|
|
}
|
|
const message = toErrorMessage(error);
|
|
if (isNotFoundErrorMessage(message)) {
|
|
setMissingAgentState({ kind: "not_found", message });
|
|
return;
|
|
}
|
|
setMissingAgentState({ kind: "error", message });
|
|
});
|
|
}, [
|
|
agent,
|
|
agentId,
|
|
client,
|
|
ensureAgentIsInitialized,
|
|
hasSession,
|
|
isConnected,
|
|
missingAgentState.kind,
|
|
serverId,
|
|
setAgents,
|
|
setPendingPermissions,
|
|
shouldUseOptimisticStream,
|
|
]);
|
|
|
|
const isHistoryRefreshCatchingUp =
|
|
viewState.tag === "ready" &&
|
|
viewState.sync.status === "catching_up" &&
|
|
viewState.sync.ui === "toast";
|
|
const shouldEmitSyncErrorToast =
|
|
viewState.tag === "ready" &&
|
|
viewState.sync.status === "sync_error" &&
|
|
viewState.sync.shouldEmitSyncErrorToast;
|
|
|
|
useDelayedHistoryRefreshToast({
|
|
isCatchingUp: isHistoryRefreshCatchingUp,
|
|
indicatorColor: theme.colors.primary,
|
|
showToast: panelToast.api.show,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!shouldEmitSyncErrorToast) {
|
|
return;
|
|
}
|
|
panelToast.api.error("Failed to refresh agent. Retrying in background.");
|
|
}, [panelToast.api, shouldEmitSyncErrorToast]);
|
|
|
|
if (viewState.tag === "not_found") {
|
|
return (
|
|
<View style={styles.container} testID="agent-not-found">
|
|
<View style={styles.errorContainer}>
|
|
<Text style={styles.errorText}>Agent not found</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (viewState.tag === "error") {
|
|
return (
|
|
<View style={styles.container} testID="agent-load-error">
|
|
<View style={styles.errorContainer}>
|
|
<Text style={styles.errorText}>Failed to load agent</Text>
|
|
<Text style={styles.statusText}>{viewState.message}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (viewState.tag === "boot" || !effectiveAgent) {
|
|
return (
|
|
<View style={styles.container} testID="agent-loading">
|
|
<View style={styles.errorContainer}>
|
|
<ActivityIndicator size="large" color={theme.colors.foregroundMuted} />
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.root}>
|
|
<FileDropZone
|
|
onFilesDropped={handleFilesDropped}
|
|
disabled={isArchivingCurrentAgent}
|
|
>
|
|
<View style={styles.container}>
|
|
<View style={styles.contentContainer}>
|
|
<ReanimatedAnimated.View
|
|
style={[styles.content, animatedKeyboardStyle]}
|
|
>
|
|
<AgentStreamView
|
|
ref={streamViewRef}
|
|
agentId={effectiveAgent.id}
|
|
serverId={serverId}
|
|
agent={effectiveAgent}
|
|
streamItems={
|
|
shouldUseOptimisticStream ? mergedStreamItems : streamItems
|
|
}
|
|
pendingPermissions={pendingPermissions}
|
|
routeBottomAnchorRequest={routeBottomAnchorRequest}
|
|
isAuthoritativeHistoryReady={hasAppliedAuthoritativeHistory}
|
|
onOpenWorkspaceFile={onOpenWorkspaceFile}
|
|
/>
|
|
</ReanimatedAnimated.View>
|
|
</View>
|
|
|
|
{agentId && !isArchivingCurrentAgent && !agent?.archivedAt ? (
|
|
<AgentInputArea
|
|
agentId={agentId}
|
|
serverId={serverId}
|
|
value={agentInputDraft.text}
|
|
onChangeText={agentInputDraft.setText}
|
|
images={agentInputDraft.images}
|
|
onChangeImages={agentInputDraft.setImages}
|
|
clearDraft={agentInputDraft.clear}
|
|
autoFocus={isPaneFocused}
|
|
isSubmitLoading={showPendingCreateSubmitLoading}
|
|
onAttentionInputFocus={attentionController.clearOnInputFocus}
|
|
onAttentionPromptSend={attentionController.clearOnPromptSend}
|
|
onAddImages={handleAddImagesCallback}
|
|
onComposerHeightChange={(height) => {
|
|
logWebStickyBottom("screen_composer_height_change", {
|
|
agentId,
|
|
height,
|
|
});
|
|
streamViewRef.current?.prepareForViewportChange();
|
|
}}
|
|
onMessageSent={() => {
|
|
logWebStickyBottom("screen_message_sent_scroll_to_bottom", {
|
|
agentId,
|
|
});
|
|
streamViewRef.current?.scrollToBottom("message-sent");
|
|
}}
|
|
/>
|
|
) : agentId && agent?.archivedAt ? (
|
|
<ArchivedAgentCallout serverId={serverId} agentId={agentId} />
|
|
) : null}
|
|
|
|
{viewState.tag === "ready" &&
|
|
viewState.sync.status === "catching_up" &&
|
|
viewState.sync.ui === "overlay" ? (
|
|
<View style={styles.historySyncOverlay} testID="agent-history-overlay">
|
|
<ActivityIndicator size="large" color={theme.colors.foregroundMuted} />
|
|
</View>
|
|
) : null}
|
|
|
|
<ToastViewport
|
|
toast={panelToast.toast}
|
|
onDismiss={panelToast.dismiss}
|
|
placement="panel"
|
|
/>
|
|
</View>
|
|
</FileDropZone>
|
|
|
|
{isArchivingCurrentAgent ? (
|
|
<View style={styles.archivingOverlay} testID="agent-archiving-overlay">
|
|
<ActivityIndicator size="large" color={theme.colors.foreground} />
|
|
<Text style={styles.archivingTitle}>Archiving agent...</Text>
|
|
<Text style={styles.archivingSubtitle}>
|
|
Please wait while we archive this agent.
|
|
</Text>
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function AgentSessionUnavailableState({
|
|
serverLabel,
|
|
connectionStatus,
|
|
lastError,
|
|
isUnknownDaemon = false,
|
|
}: {
|
|
serverLabel: string;
|
|
connectionStatus: HostRuntimeConnectionStatus;
|
|
lastError: string | null;
|
|
isUnknownDaemon?: boolean;
|
|
}) {
|
|
if (isUnknownDaemon) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.centerState}>
|
|
<Text style={styles.errorText}>
|
|
Cannot open this agent because {serverLabel} is not configured on
|
|
this device.
|
|
</Text>
|
|
<Text style={styles.statusText}>
|
|
Add the host in Settings or open an agent on a configured server to
|
|
continue.
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const isConnecting = connectionStatus === "connecting";
|
|
const isPreparingSession = connectionStatus === "online";
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.centerState}>
|
|
{isConnecting || isPreparingSession ? (
|
|
<>
|
|
<ActivityIndicator size="large" />
|
|
<Text style={styles.loadingText}>
|
|
{isPreparingSession
|
|
? `Preparing ${serverLabel} session...`
|
|
: `Connecting to ${serverLabel}...`}
|
|
</Text>
|
|
<Text style={styles.statusText}>
|
|
{isPreparingSession
|
|
? "We will show this agent in a moment."
|
|
: "We will show this agent once the host is online."}
|
|
</Text>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Text style={styles.offlineTitle}>
|
|
Reconnecting to {serverLabel}...
|
|
</Text>
|
|
<Text style={styles.offlineDescription}>
|
|
We will show this agent again as soon as the host is reachable.
|
|
</Text>
|
|
{lastError ? (
|
|
<Text style={styles.offlineDetails}>{lastError}</Text>
|
|
) : null}
|
|
</>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create((theme) => ({
|
|
root: {
|
|
flex: 1,
|
|
backgroundColor: theme.colors.surface0,
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: theme.colors.surface0,
|
|
},
|
|
contentContainer: {
|
|
flex: 1,
|
|
overflow: "hidden",
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
},
|
|
historySyncOverlay: {
|
|
position: "absolute",
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
backgroundColor: theme.colors.surface0,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
zIndex: 40,
|
|
},
|
|
archivingOverlay: {
|
|
position: "absolute",
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
backgroundColor: "rgba(8, 10, 14, 0.86)",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingHorizontal: theme.spacing[8],
|
|
gap: theme.spacing[3],
|
|
zIndex: 50,
|
|
},
|
|
archivingTitle: {
|
|
fontSize: theme.fontSize.lg,
|
|
fontWeight: theme.fontWeight.semibold,
|
|
color: theme.colors.foreground,
|
|
textAlign: "center",
|
|
},
|
|
archivingSubtitle: {
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.foregroundMuted,
|
|
textAlign: "center",
|
|
},
|
|
loadingText: {
|
|
fontSize: theme.fontSize.base,
|
|
color: theme.colors.foregroundMuted,
|
|
},
|
|
centerState: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingHorizontal: theme.spacing[6],
|
|
gap: theme.spacing[3],
|
|
},
|
|
errorContainer: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
errorText: {
|
|
fontSize: theme.fontSize.lg,
|
|
color: theme.colors.foregroundMuted,
|
|
textAlign: "center",
|
|
},
|
|
statusText: {
|
|
marginTop: theme.spacing[2],
|
|
textAlign: "center",
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.foregroundMuted,
|
|
},
|
|
offlineTitle: {
|
|
fontSize: theme.fontSize.base,
|
|
fontWeight: theme.fontWeight.semibold,
|
|
color: theme.colors.foreground,
|
|
textAlign: "center",
|
|
},
|
|
offlineDescription: {
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.foregroundMuted,
|
|
textAlign: "center",
|
|
},
|
|
offlineDetails: {
|
|
fontSize: theme.fontSize.xs,
|
|
color: theme.colors.foregroundMuted,
|
|
textAlign: "center",
|
|
},
|
|
}));
|