@intentcomputing/koko-agent-sdk 1.0.1

package/src/ui/KokoSubtitle.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import { useTaskStore } from '../task/useTaskStore';
+
+/**
+ * Karaoke-style subtitle for the current task action.
+ * Prefer KokoObserver progress pill in the default UX; kept for custom layouts.
+ */
+export function KokoSubtitle() {
+  const { subtitle, tasks, activeTaskId } = useTaskStore();
+  const opacity = useRef(new Animated.Value(0)).current;
+  const lastText = useRef<string | null>(null);
+  const active = tasks.find((t) => t.id === activeTaskId);
+  const show = !!subtitle && active?.status === 'running';
+
+  useEffect(() => {
+    if (!show) {
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 160,
+        useNativeDriver: true,
+      }).start();
+      lastText.current = null;
+      return;
+    }
+    if (lastText.current === subtitle) return;
+    lastText.current = subtitle;
+    opacity.setValue(0.35);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 160,
+      useNativeDriver: true,
+    }).start();
+  }, [show, subtitle, opacity]);
+
+  if (!subtitle || !show) return null;
+
+  return (
+    <Animated.View style={[styles.wrap, { opacity }]} pointerEvents="none">
+      <View style={styles.pill}>
+        <View style={styles.dot} />
+        <Text style={styles.text} numberOfLines={2}>
+          {subtitle}
+        </Text>
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    marginBottom: 8,
+  },
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    maxWidth: '100%',
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 14,
+    backgroundColor: 'rgba(20,20,22,0.88)',
+  },
+  dot: {
+    width: 7,
+    height: 7,
+    borderRadius: 4,
+    backgroundColor: '#7CFFB2',
+    marginRight: 10,
+  },
+  text: {
+    flexShrink: 1,
+    color: '#F5F5F7',
+    fontSize: 14,
+    lineHeight: 19,
+    fontWeight: '500',
+    letterSpacing: 0.1,
+  },
+});

package/src/ui/KokoTaskPanel.tsx

@@ -0,0 +1,299 @@
+import React, { useMemo } from 'react';
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { TaskStore } from '../task/TaskStore';
+import type { Task, TaskNode, TaskStatus } from '../task/types';
+import { useTaskStore } from '../task/useTaskStore';
+import { useKokoUi } from '../provider/KokoUiContext';
+
+function statusColor(status: TaskStatus): string {
+  switch (status) {
+    case 'running':
+      return '#7CFFB2';
+    case 'success':
+      return '#6EC8FF';
+    case 'failed':
+      return '#FF7A7A';
+    case 'cancelled':
+      return '#A0A0A5';
+    default:
+      return '#A0A0A5';
+  }
+}
+
+function formatTime(ts: number): string {
+  const d = new Date(ts);
+  const hh = String(d.getHours()).padStart(2, '0');
+  const mm = String(d.getMinutes()).padStart(2, '0');
+  const ss = String(d.getSeconds()).padStart(2, '0');
+  return `${hh}:${mm}:${ss}`;
+}
+
+function TaskRow({
+  task,
+  selected,
+  onPress,
+}: {
+  task: Task;
+  selected: boolean;
+  onPress: () => void;
+}) {
+  const { t } = useKokoUi();
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[styles.taskRow, selected && styles.taskRowSelected]}
+    >
+      <View style={[styles.statusDot, { backgroundColor: statusColor(task.status) }]} />
+      <View style={styles.taskMeta}>
+        <Text style={styles.taskTitle} numberOfLines={1}>
+          {task.title}
+        </Text>
+        <Text style={styles.taskSub}>
+          {t(`status.${task.status}`)} · {t(task.nodes.length === 1 ? 'panel.stepOne' : 'panel.stepMany', { count: task.nodes.length })} · {formatTime(task.createdAt)}
+        </Text>
+      </View>
+      <Text style={styles.chevron}>{selected ? '▾' : '›'}</Text>
+    </Pressable>
+  );
+}
+
+function NodeRow({ node }: { node: TaskNode }) {
+  const { t } = useKokoUi();
+  return (
+    <View style={styles.nodeRow}>
+      <Text style={styles.nodeTime}>{formatTime(node.createdAt)}</Text>
+      <View style={styles.nodeBody}>
+        <Text style={styles.nodeKind}>{t(`kind.${node.kind}`)}</Text>
+        <Text style={styles.nodeTitle}>{node.title}</Text>
+        {node.detail ? (
+          <Text style={styles.nodeDetail} numberOfLines={3}>
+            {node.detail}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+/**
+ * @deprecated Prefer KokoChatSheet via KokoObserver / KokoEntryButton.
+ * Legacy inline task list; maps to sheetOpen for expand/collapse.
+ */
+export function KokoTaskPanel() {
+  const { branding, t } = useKokoUi();
+  const { tasks, ui } = useTaskStore();
+  const selected = useMemo(
+    () => tasks.find((t) => t.id === ui.selectedTaskId) ?? null,
+    [tasks, ui.selectedTaskId],
+  );
+
+  if (!ui.sheetOpen) return null;
+
+  return (
+    <View style={styles.shell} pointerEvents="box-none">
+      <View style={styles.handleBar}>
+        <Pressable
+          style={styles.handleMain}
+          onPress={() => TaskStore.toggleSheet()}
+          accessibilityRole="button"
+          accessibilityLabel={t('panel.collapseA11y', { name: branding.name })}
+        >
+          <View style={styles.handleGrip} />
+          <Text style={styles.handleTitle}>
+            {branding.name}{tasks.length ? ` · ${tasks.length}` : ''}
+          </Text>
+        </Pressable>
+        <Pressable
+          hitSlop={12}
+          onPress={() => TaskStore.closeSheet()}
+          style={styles.hideBtn}
+          accessibilityLabel={t('panel.closeA11y', { name: branding.name })}
+        >
+          <Text style={styles.hideText}>{t('panel.close')}</Text>
+        </Pressable>
+      </View>
+
+      <View style={styles.panel}>
+          <Text style={styles.sectionLabel}>{t('panel.tasks')}</Text>
+          <ScrollView style={styles.taskList} nestedScrollEnabled>
+            {tasks.length === 0 ? (
+              <Text style={styles.empty}>{t('panel.emptyTasks')}</Text>
+            ) : (
+              tasks.map((task) => (
+                <TaskRow
+                  key={task.id}
+                  task={task}
+                  selected={task.id === ui.selectedTaskId}
+                  onPress={() => TaskStore.selectTask(task.id)}
+                />
+              ))
+            )}
+          </ScrollView>
+
+          {selected ? (
+            <>
+              <View style={styles.divider} />
+              <Text style={styles.sectionLabel}>{t('panel.session', { title: selected.title })}</Text>
+              <ScrollView style={styles.nodeList} nestedScrollEnabled>
+                {selected.nodes.map((node) => (
+                  <NodeRow key={node.id} node={node} />
+                ))}
+              </ScrollView>
+            </>
+          ) : null}
+        </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  shell: {
+    width: '100%',
+  },
+  handleBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'center',
+    minWidth: 180,
+    paddingLeft: 14,
+    paddingRight: 10,
+    paddingVertical: 6,
+    borderRadius: 18,
+    backgroundColor: 'rgba(28,28,30,0.92)',
+  },
+  handleMain: {
+    flex: 1,
+    paddingTop: 8,
+    paddingBottom: 4,
+  },
+  handleGrip: {
+    width: 28,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: 'rgba(255,255,255,0.28)',
+    alignSelf: 'center',
+    marginBottom: 6,
+  },
+  handleTitle: {
+    color: '#F2F2F7',
+    fontSize: 13,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  hideBtn: {
+    paddingLeft: 8,
+    paddingVertical: 8,
+  },
+  hideText: {
+    color: 'rgba(255,255,255,0.55)',
+    fontSize: 12,
+  },
+  panel: {
+    marginTop: 8,
+    maxHeight: 360,
+    borderRadius: 16,
+    backgroundColor: 'rgba(22,22,24,0.96)',
+    paddingHorizontal: 12,
+    paddingTop: 12,
+    paddingBottom: 8,
+  },
+  sectionLabel: {
+    color: 'rgba(255,255,255,0.45)',
+    fontSize: 11,
+    fontWeight: '600',
+    letterSpacing: 0.6,
+    textTransform: 'uppercase',
+    marginBottom: 8,
+    marginTop: 4,
+  },
+  taskList: {
+    maxHeight: 140,
+  },
+  nodeList: {
+    maxHeight: 180,
+  },
+  empty: {
+    color: 'rgba(255,255,255,0.4)',
+    fontSize: 13,
+    paddingVertical: 12,
+  },
+  taskRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 8,
+    borderRadius: 10,
+    marginBottom: 4,
+  },
+  taskRowSelected: {
+    backgroundColor: 'rgba(255,255,255,0.08)',
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 10,
+  },
+  taskMeta: {
+    flex: 1,
+  },
+  taskTitle: {
+    color: '#F5F5F7',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  taskSub: {
+    color: 'rgba(255,255,255,0.45)',
+    fontSize: 11,
+    marginTop: 2,
+  },
+  chevron: {
+    color: 'rgba(255,255,255,0.4)',
+    fontSize: 16,
+    marginLeft: 6,
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: 'rgba(255,255,255,0.12)',
+    marginVertical: 8,
+  },
+  nodeRow: {
+    flexDirection: 'row',
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+  },
+  nodeTime: {
+    width: 58,
+    color: 'rgba(255,255,255,0.35)',
+    fontSize: 11,
+    fontVariant: ['tabular-nums'],
+    marginTop: 2,
+  },
+  nodeBody: {
+    flex: 1,
+  },
+  nodeKind: {
+    color: '#8AE0FF',
+    fontSize: 10,
+    fontWeight: '700',
+    letterSpacing: 0.4,
+    marginBottom: 2,
+  },
+  nodeTitle: {
+    color: '#F5F5F7',
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  nodeDetail: {
+    color: 'rgba(255,255,255,0.45)',
+    fontSize: 11,
+    marginTop: 2,
+    lineHeight: 15,
+  },
+});

package/src/ui/hostOverlay.tsx

@@ -0,0 +1,148 @@
+import React, { type ComponentType, type ReactNode } from 'react';
+import {
+  Modal,
+  Platform,
+  StyleSheet,
+  useWindowDimensions,
+  type ViewStyle,
+} from 'react-native';
+import { KokoOverlayLayer } from './KokoOverlayLayer';
+
+type OverlayProps = {
+  children: ReactNode;
+  /** Remount / bring-to-front token (host FullWindowOverlay). */
+  liftToken?: number;
+  style?: ViewStyle;
+};
+
+type FullWindowOverlayProps = {
+  children: ReactNode;
+  bringToFrontToken?: number;
+  unstable_accessibilityContainerViewIsModal?: boolean;
+};
+
+function tryFullWindowOverlay(): ComponentType<FullWindowOverlayProps> | null {
+  if (Platform.OS !== 'ios') return null;
+  try {
+    // Optional peer — OneKey (and most RN hosts) already ship react-native-screens.
+    // FullWindowOverlay sits above native-stack modals; RN Modal often cannot.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('react-native-screens');
+    const Comp = mod.FullWindowOverlay as
+      | ComponentType<FullWindowOverlayProps>
+      | undefined;
+    return Comp ?? null;
+  } catch {
+    return null;
+  }
+}
+
+const HostFullWindowOverlay = tryFullWindowOverlay();
+
+/**
+ * Host chrome above native Settings / stack modals.
+ *
+ * Prefer FullWindowOverlay: it adds a view to the window rather than presenting
+ * a view controller, so `pointerEvents="box-none"` lets the user keep using the
+ * App underneath while a task runs. An RN Modal is its own iOS window and
+ * swallows every touch that is not aimed at the chrome itself — the agent does
+ * not notice, because the native tap skips Koko chrome windows, but the user
+ * cannot tap anything until the task ends.
+ *
+ * Modal stays as the fallback for hosts without react-native-screens, and
+ * `forceModalOverlay` keeps it reachable if a host needs it.
+ */
+export function KokoHostOverlay({
+  children,
+  liftToken = 0,
+  style,
+  forceModalOverlay = false,
+}: OverlayProps & { forceModalOverlay?: boolean }) {
+  const { width, height } = useWindowDimensions();
+
+  if (HostFullWindowOverlay && !forceModalOverlay) {
+    return (
+      // `bringToFrontToken` re-raises in place. Do not key off liftToken here:
+      // liftChrome fires about once per step, and remounting a native overlay
+      // that often leaves the progress pill mid-presentation and never visible.
+      <HostFullWindowOverlay
+        bringToFrontToken={liftToken}
+        unstable_accessibilityContainerViewIsModal={false}
+      >
+        {/*
+          FullWindowOverlay sets the frame on its native container rather than
+          on itself, so its Yoga node measures 0x0 and `absoluteFillObject`
+          (top/left/right/bottom: 0) collapses with it. Anything anchored with
+          `bottom` then resolves against a zero-height box and lands above the
+          top edge of the screen — the progress pill measured at y=-96. Size
+          the layer explicitly so bottom-anchored chrome has a box to sit in.
+        */}
+        <KokoOverlayLayer
+          pointerEvents="box-none"
+          style={[{ width, height }, style]}
+        >
+          {children}
+        </KokoOverlayLayer>
+      </HostFullWindowOverlay>
+    );
+  }
+
+  if (Platform.OS === 'android' && !forceModalOverlay) {
+    // An RN Modal is its own window here too, which costs more than it buys:
+    // it swallows the user's touches, and it becomes the front-most window, so
+    // the SDK's own dump / tap would aim at the chrome instead of the host.
+    // The provider renders this as the last sibling of the host tree, so a
+    // plain absolute layer already paints over everything in the window.
+    //
+    // Size it explicitly for the same reason as the iOS branch: measured inside
+    // a full-screen host root, `absoluteFillObject` still collapsed to height 0,
+    // so bottom-anchored chrome sat below the screen and top-anchored chrome
+    // (the cursor) landed a full screen height too low.
+    return (
+      <KokoOverlayLayer
+        pointerEvents="box-none"
+        style={[styles.androidLayer, { width, height }, style]}
+      >
+        {children}
+      </KokoOverlayLayer>
+    );
+  }
+
+  return (
+    <Modal
+      key={`koko-host-overlay-${liftToken}`}
+      visible
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      presentationStyle={Platform.OS === 'ios' ? 'overFullScreen' : undefined}
+      supportedOrientations={['portrait', 'landscape']}
+    >
+      <KokoOverlayLayer pointerEvents="box-none" style={[styles.fill, style]}>
+        {children}
+      </KokoOverlayLayer>
+    </Modal>
+  );
+}
+
+/** Whether this build can pierce native-stack modals via screens overlay. */
+export function kokoHostOverlayUsesScreens(): boolean {
+  return HostFullWindowOverlay != null;
+}
+
+const styles = StyleSheet.create({
+  fill: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'transparent',
+  },
+  // Anchor top-left and take the size from props: `right`/`bottom` and `zIndex`
+  // both have to stay off. zIndex on a child of the host root stops the host's
+  // own siblings from drawing at all on Android, and the layer is already the
+  // last sibling, so it paints last without one.
+  androidLayer: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    backgroundColor: 'transparent',
+  },
+});

package/src/ui/icons.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+/** Minimal vector-less icons for SDK UI (no icon font dependency). */
+
+export function IconClose({
+  color = 'rgba(255,255,255,0.72)',
+  size = 14,
+  style,
+}: {
+  color?: string;
+  size?: number;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const t = Math.max(1.5, size * 0.12);
+  return (
+    <View style={[{ width: size, height: size }, style]}>
+      <View
+        style={[
+          styles.bar,
+          {
+            backgroundColor: color,
+            width: size,
+            height: t,
+            top: (size - t) / 2,
+            transform: [{ rotate: '45deg' }],
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.bar,
+          {
+            backgroundColor: color,
+            width: size,
+            height: t,
+            top: (size - t) / 2,
+            transform: [{ rotate: '-45deg' }],
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+export function IconStop({
+  color = '#fff',
+  size = 12,
+  style,
+}: {
+  color?: string;
+  size?: number;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const r = Math.max(2, size * 0.18);
+  return (
+    <View
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: r,
+          backgroundColor: color,
+        },
+        style,
+      ]}
+    />
+  );
+}
+
+/** Checkmark (two bars) for success result. */
+export function IconCheck({
+  color = '#fff',
+  size = 16,
+  style,
+}: {
+  color?: string;
+  size?: number;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const t = Math.max(2, size * 0.14);
+  return (
+    <View style={[{ width: size, height: size }, style]}>
+      <View
+        style={{
+          position: 'absolute',
+          backgroundColor: color,
+          width: size * 0.38,
+          height: t,
+          borderRadius: t,
+          left: size * 0.08,
+          top: size * 0.52,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          backgroundColor: color,
+          width: size * 0.62,
+          height: t,
+          borderRadius: t,
+          left: size * 0.28,
+          top: size * 0.42,
+          transform: [{ rotate: '-48deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
+/** Horizontal dash for cancelled. */
+export function IconDash({
+  color = '#fff',
+  size = 14,
+  style,
+}: {
+  color?: string;
+  size?: number;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const t = Math.max(2, size * 0.16);
+  return (
+    <View
+      style={[
+        {
+          width: size * 0.7,
+          height: t,
+          borderRadius: t,
+          backgroundColor: color,
+          alignSelf: 'center',
+        },
+        style,
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    position: 'absolute',
+    left: 0,
+    borderRadius: 1,
+  },
+});