mirror of
https://github.com/stablyai/orca.git
synced 2026-10-24 08:03:58 +00:00
Brennan BensonandNeil
ec4687c434
* feat(agents): distinguish Claude background monitoring Adds an optional `workingMode: 'monitoring'` discriminator for a Claude session whose lead turn finished but which still has background shell tasks or session crons registered. The wire state stays `working`, so older peers that never read the field keep rendering Working. (cherry picked from commitd5d54b4bdd) Rebased onto current main (554 commits of drift) by Brennan Benson; conflicts resolved by keeping both sides where main and this branch made independent additions to the same construct. * fix(sidebar): keep monitoring status visible (cherry picked from commitfd6b38654d) * test(agents): cover Claude monitoring drain (cherry picked from commitce4d61ebf8) * test(mobile): avoid unresolved renderer test type (cherry picked from commitbbcfa35ff9) * feat(agents): render Claude monitoring as a static turquoise dot Replaces the yellow Radio glyph from #14205 with a static dot in a new --agent-monitoring token (#8abeb7), defined once for light and once for dark like --workspace-status-done, so the status keeps its identity when the theme flips. Deliberately a fixed UI value: it never reads terminal theme state at runtime. Adds the turn-boundary notification pins. The monitoring predicate and the turnCompletedAt stamp are computed from the same "lead said done but the pane resolves to working" expression, so a rename can silently drop the stamp and kill a completion notification that works today with nothing else going red. * revert(agents): restore the yellow Radio glyph for monitoring Brennan chose #14205's original treatment over the turquoise dot, so the visual goes back to nwparker's: lucide Radio in text-yellow-500 across the sidebar, dashboard dot, cmd-j palette and agent-map ring. Reverts only the visual surface. The turn-boundary notification pins stay — the monitoring predicate and the turnCompletedAt stamp share an expression, so a rename can silently drop the stamp and kill a completion that works today with nothing else going red. The --agent-monitoring token is removed with its last consumer rather than left dead in main.css. --------- Co-authored-by: Neil <4138956+nwparker@users.noreply.github.com>
101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
import { useEffect, useRef } from 'react'
|
|
import { Radio } from 'lucide-react-native'
|
|
import { Animated, Easing, StyleSheet, View } from 'react-native'
|
|
import type { AgentWorkingMode } from '../../../src/shared/agent-status-types'
|
|
|
|
type WorktreeStatus = 'working' | 'active' | 'permission' | 'done' | 'inactive'
|
|
|
|
// Why: colors and sizing are 1:1 with the desktop StatusIndicator
|
|
// (src/renderer/src/components/sidebar/StatusIndicator.tsx) so the mobile
|
|
// worktree list reads identically to the sidebar — same yellow spinner for
|
|
// 'working', same emerald dot for 'active'/'done', same neutral-500 @ 40%
|
|
// for 'inactive', same red for 'permission'. Diverging palettes here lose
|
|
// the design intent ('moving' vs 'alive' vs 'completed') the desktop encodes.
|
|
const STATUS_COLORS: Record<WorktreeStatus, string> = {
|
|
working: '#eab308',
|
|
active: '#10b981',
|
|
done: '#10b981',
|
|
permission: '#ef4444',
|
|
inactive: 'rgba(115,115,115,0.4)'
|
|
}
|
|
|
|
export function AgentSpinner({
|
|
status,
|
|
workingMode
|
|
}: {
|
|
status: WorktreeStatus
|
|
workingMode?: AgentWorkingMode
|
|
}) {
|
|
const spinValue = useRef(new Animated.Value(0)).current
|
|
const monitoring = status === 'working' && workingMode === 'monitoring'
|
|
|
|
useEffect(() => {
|
|
if (status === 'working' && !monitoring) {
|
|
const animation = Animated.loop(
|
|
Animated.timing(spinValue, {
|
|
toValue: 1,
|
|
duration: 1000,
|
|
easing: Easing.linear,
|
|
useNativeDriver: true
|
|
})
|
|
)
|
|
animation.start()
|
|
return () => animation.stop()
|
|
}
|
|
spinValue.setValue(0)
|
|
}, [monitoring, status, spinValue])
|
|
|
|
const color = STATUS_COLORS[status] ?? STATUS_COLORS.inactive
|
|
|
|
if (monitoring) {
|
|
return (
|
|
<View style={styles.wrapper} accessibilityLabel="Monitoring background tasks">
|
|
<Radio size={12} color={STATUS_COLORS.working} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
if (status === 'working') {
|
|
const rotate = spinValue.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: ['0deg', '360deg']
|
|
})
|
|
return (
|
|
<View style={styles.wrapper}>
|
|
<Animated.View style={[styles.spinner, { borderColor: color, transform: [{ rotate }] }]} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<View style={styles.wrapper}>
|
|
<View style={[styles.dot, { backgroundColor: color }]} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
// Why: 12x12 wrapper centered around an 8x8 inner glyph mirrors the
|
|
// desktop's `inline-flex h-3 w-3 ... items-center justify-center` shell
|
|
// around `size-2` indicator — keeps row height/baseline alignment stable
|
|
// across status transitions.
|
|
wrapper: {
|
|
width: 12,
|
|
height: 12,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
dot: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4
|
|
},
|
|
spinner: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4,
|
|
borderWidth: 2,
|
|
borderTopColor: 'transparent'
|
|
}
|
|
})
|