@intentcomputing/koko-agent-sdk 1.0.1

package/lib/module/ui/KokoChatSheet.js

@@ -0,0 +1,879 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, Alert, Animated, Dimensions, Easing, FlatList, Image, Keyboard, Modal, Platform, Pressable, StatusBar, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useKokoAgent } from "../provider/KokoProvider.js";
+import { useKokoUi } from "../provider/KokoUiContext.js";
+import { TaskStore } from "../task/TaskStore.js";
+import { useTaskStore } from "../task/useTaskStore.js";
+import { useSafeAreaInsetsOptional } from "./safeArea.js";
+import { IconClose, IconStop } from "./icons.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SHEET_BG_FALLBACK = '#121316';
+const DEFAULT_SHEET_HEIGHT_RATIO = 0.6;
+/** Auto-growing composer: default 1 line, cap at 3. */
+const INPUT_FONT_SIZE = 15;
+const INPUT_LINE_HEIGHT = 22;
+const INPUT_MAX_LINES = 3;
+const INPUT_TEXT_MIN = INPUT_LINE_HEIGHT;
+const INPUT_TEXT_MAX = INPUT_LINE_HEIGHT * INPUT_MAX_LINES;
+
+/**
+ * Estimate height from text + box width.
+ * iOS often reports a stuck contentSize when `height` is controlled, so we
+ * must not rely on contentSize alone (paste / wrap would never grow).
+ */
+function estimateComposerHeight(value, widthPt) {
+  if (!value) return INPUT_TEXT_MIN;
+  const paragraphs = value.split('\n');
+  if (widthPt <= 0) {
+    return Math.min(INPUT_TEXT_MAX, Math.max(INPUT_TEXT_MIN, paragraphs.length * INPUT_LINE_HEIGHT));
+  }
+  // Slightly narrow so we grow a bit early rather than clip.
+  const charsPerLine = Math.max(4, Math.floor(widthPt / (INPUT_FONT_SIZE * 0.95)));
+  let lines = 0;
+  for (const para of paragraphs) {
+    const len = Math.max(1, Array.from(para).length);
+    lines += Math.ceil(len / charsPerLine);
+  }
+  lines = Math.min(INPUT_MAX_LINES, Math.max(1, lines));
+  return lines * INPUT_LINE_HEIGHT;
+}
+/** Read the host app's current StatusBar appearance before we override it. */
+function snapshotHostStatusBar() {
+  const sb = StatusBar;
+  const cur = sb._currentValues ?? sb._defaultProps;
+  return {
+    barStyle: cur?.barStyle?.value ?? 'default',
+    backgroundColor: cur?.backgroundColor?.value != null ? String(cur.backgroundColor.value) : undefined
+  };
+}
+const KIND_KEYS = {
+  user: 'kind.user',
+  plan: 'kind.plan',
+  dump: 'kind.dump',
+  find: 'kind.find',
+  tap: 'kind.tap',
+  swipe: 'kind.swipe',
+  type: 'kind.type',
+  confirm: 'kind.confirm',
+  info: 'kind.info',
+  error: 'kind.error'
+};
+function formatTime(ts) {
+  const d = new Date(ts);
+  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
+}
+
+/**
+ * Chat sheet: backdrop fades in first, then sheet slides down from the top.
+ */
+export function KokoChatSheet({
+  placeholder
+}) {
+  const koko = useKokoAgent();
+  const {
+    branding,
+    t,
+    colors
+  } = useKokoUi();
+  const {
+    tasks,
+    ui,
+    activeTaskId
+  } = useTaskStore();
+  const insets = useSafeAreaInsetsOptional();
+  const [text, setText] = useState('');
+  const [inputHeight, setInputHeight] = useState(INPUT_TEXT_MIN);
+  const [inputWidth, setInputWidth] = useState(0);
+  const textRef = useRef('');
+  const [busy, setBusy] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+  // Negative Y = off-screen above; sheet slides down from the top.
+  const sheetY = useRef(new Animated.Value(-Dimensions.get('window').height)).current;
+  const statusBarEntryRef = useRef(null);
+  const hostStatusBarRef = useRef(null);
+  const primaryColor = branding.primaryColor;
+  const inputPlaceholder = placeholder ?? branding.placeholder;
+  const statusMeta = useCallback(status => {
+    switch (status) {
+      case 'running':
+        return {
+          color: '#34D399',
+          label: t('status.running')
+        };
+      case 'success':
+        return {
+          color: '#60A5FA',
+          label: t('status.success')
+        };
+      case 'failed':
+        return {
+          color: '#F87171',
+          label: t('status.failed')
+        };
+      case 'cancelled':
+        return {
+          color: '#A1A1AA',
+          label: t('status.cancelled')
+        };
+      default:
+        return {
+          color: '#A1A1AA',
+          label: status
+        };
+    }
+  }, [t]);
+  const applySheetStatusBar = useCallback(() => {
+    if (statusBarEntryRef.current) return;
+    // Record host app status bar before overriding (for restore / debugging).
+    hostStatusBarRef.current = snapshotHostStatusBar();
+    statusBarEntryRef.current = StatusBar.pushStackEntry({
+      animated: true,
+      barStyle: colors.statusBar,
+      // Colour only. On Android `translucent` is a window flag on the host
+      // activity, not something we paint: flipping it relayouts the whole app
+      // out from under the status bar and back again, which reads as the host
+      // flinching every time the sheet opens. The Modal already draws under
+      // the status bar on its own.
+      ...(Platform.OS === 'android' ? {
+        backgroundColor: colors.sheetBg
+      } : null)
+    });
+  }, [colors.sheetBg, colors.statusBar]);
+  const restoreHostStatusBar = useCallback(() => {
+    if (statusBarEntryRef.current) {
+      StatusBar.popStackEntry(statusBarEntryRef.current);
+      statusBarEntryRef.current = null;
+    } else if (hostStatusBarRef.current) {
+      // Fallback if stack entry was lost — re-apply recorded host values.
+      const prev = hostStatusBarRef.current;
+      StatusBar.setBarStyle(prev.barStyle, true);
+      if (Platform.OS === 'android' && prev.backgroundColor != null) {
+        StatusBar.setBackgroundColor(prev.backgroundColor, true);
+      }
+    }
+    hostStatusBarRef.current = null;
+  }, []);
+
+  // This sheet hangs from the top, so a keyboard never pushes it anywhere —
+  // it just eats the bottom of the screen where the composer lives. The only
+  // thing that keeps the input reachable is capping how tall the sheet may
+  // grow. KeyboardAvoidingView cannot express that: it assumes bottom-anchored
+  // content, and on Android the Modal gets its own window that the system
+  // never resizes for the IME, so it is a no-op there anyway.
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const [rootHeight, setRootHeight] = useState(0);
+  const [composerFocused, setComposerFocused] = useState(false);
+  useEffect(() => {
+    const ios = Platform.OS === 'ios';
+    const show = Keyboard.addListener(ios ? 'keyboardWillShow' : 'keyboardDidShow', e => setKeyboardHeight(e.endCoordinates.height));
+    const hide = Keyboard.addListener(ios ? 'keyboardWillHide' : 'keyboardDidHide', () => setKeyboardHeight(0));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+  const selected = useMemo(() => {
+    const id = ui.selectedTaskId ?? activeTaskId ?? tasks[0]?.id;
+    return tasks.find(t => t.id === id) ?? null;
+  }, [tasks, ui.selectedTaskId, activeTaskId]);
+  const running = busy || tasks.some(t => t.id === activeTaskId && t.status === 'running');
+  useEffect(() => {
+    if (ui.sheetOpen && !ui.selectedTaskId && tasks[0]) {
+      TaskStore.setUi({
+        selectedTaskId: activeTaskId ?? tasks[0].id
+      });
+    }
+  }, [ui.sheetOpen, ui.selectedTaskId, tasks, activeTaskId]);
+  const closeAnimated = useCallback(() => {
+    const off = -Dimensions.get('window').height;
+    Animated.parallel([Animated.timing(sheetY, {
+      toValue: off,
+      duration: 260,
+      easing: Easing.in(Easing.cubic),
+      useNativeDriver: true
+    }), Animated.timing(backdropOpacity, {
+      toValue: 0,
+      duration: 220,
+      delay: 80,
+      useNativeDriver: true
+    })]).start(() => {
+      // Always clear sheetOpen — if we only close on finished=true,
+      // an interrupted animation leaves sheetOpen stuck true and the
+      // sheet can slide back open on remount / Fast Refresh.
+      restoreHostStatusBar();
+      setMounted(false);
+      TaskStore.closeSheet();
+    });
+  }, [backdropOpacity, sheetY, restoreHostStatusBar]);
+  useEffect(() => {
+    if (ui.sheetOpen) {
+      setMounted(true);
+      applySheetStatusBar();
+      sheetY.setValue(-Dimensions.get('window').height);
+      backdropOpacity.setValue(0);
+      // 1) backdrop fade  2) sheet slides down from top
+      Animated.sequence([Animated.timing(backdropOpacity, {
+        toValue: 1,
+        duration: 180,
+        easing: Easing.out(Easing.quad),
+        useNativeDriver: true
+      }), Animated.timing(sheetY, {
+        toValue: 0,
+        duration: 320,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true
+      })]).start();
+    } else if (mounted) {
+      restoreHostStatusBar();
+      setMounted(false);
+      backdropOpacity.setValue(0);
+      sheetY.setValue(-Dimensions.get('window').height);
+    }
+  }, [ui.sheetOpen]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => () => restoreHostStatusBar(), [restoreHostStatusBar]);
+  const onSend = useCallback(async () => {
+    const goal = text.trim();
+    if (!goal || running) return;
+    setBusy(true);
+    setText('');
+    textRef.current = '';
+    setInputHeight(INPUT_TEXT_MIN);
+    // Drop sheet state immediately so a mid-run remount cannot reopen it.
+    restoreHostStatusBar();
+    setMounted(false);
+    TaskStore.closeSheet();
+    sheetY.setValue(-Dimensions.get('window').height);
+    backdropOpacity.setValue(0);
+    // Let host unfreeze + EmptyWallet remount before the first dump.
+    await new Promise(r => setTimeout(r, 500));
+    try {
+      await koko.runGoal(goal);
+    } catch {
+      // surfaced in task log
+    } finally {
+      setBusy(false);
+    }
+  }, [text, running, koko, restoreHostStatusBar, sheetY, backdropOpacity]);
+  const onStop = useCallback(() => {
+    koko.stop();
+    koko.finishTask('cancelled', t('runtime.cancelled'));
+    setBusy(false);
+  }, [koko, t]);
+  const confirmDeleteTask = useCallback(task => {
+    const title = task.title.length > 36 ? `${task.title.slice(0, 36)}…` : task.title;
+    Alert.alert(t('sheet.deleteTaskTitle'), t('sheet.deleteTaskBody', {
+      title
+    }), [{
+      text: t('dialog.cancel'),
+      style: 'cancel'
+    }, {
+      text: t('sheet.deleteTask'),
+      style: 'destructive',
+      onPress: () => {
+        if (task.status === 'running' && task.id === activeTaskId) {
+          koko.stop();
+        }
+        TaskStore.removeTask(task.id);
+      }
+    }]);
+  }, [t, koko, activeTaskId]);
+  if (!mounted && !ui.sheetOpen) return null;
+  const topPad = Math.max(insets.top, Platform.OS === 'ios' ? 44 : 24) + 8;
+
+  // A host whose activity runs in adjustPan never gets a keyboard frame out of
+  // Android, and neither does anything drawn inside a Modal's own window. Both
+  // are the host's call, not ours, so when the composer has focus and no frame
+  // arrived, assume a keyboard of typical size rather than let it swallow the
+  // input.
+  const screenH = rootHeight || Dimensions.get('window').height;
+  const occluded = keyboardHeight > 0 ? keyboardHeight : composerFocused ? screenH * 0.45 : 0;
+  // Keep entry, empty and selected-task states at the same default height.
+  // Content scrolls inside the sheet; the keyboard may shrink, never grow it.
+  const defaultHeight = Math.round(screenH * DEFAULT_SHEET_HEIGHT_RATIO);
+  const sheetSize = {
+    height: occluded > 0 ? Math.min(defaultHeight, Math.max(screenH * 0.3, screenH - occluded - 8)) : defaultHeight
+  };
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: mounted || ui.sheetOpen,
+    animationType: "none",
+    transparent: true,
+    presentationStyle: "overFullScreen",
+    onRequestClose: closeAnimated,
+    statusBarTranslucent: true,
+    children: /*#__PURE__*/_jsxs(View, {
+      testID: "koko-agent-overlay",
+      nativeID: "koko-agent-overlay",
+      collapsable: false,
+      style: styles.root,
+      onLayout: e => setRootHeight(e.nativeEvent.layout.height),
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "auto",
+        style: [styles.backdrop, {
+          opacity: backdropOpacity,
+          backgroundColor: colors.overlay
+        }],
+        children: /*#__PURE__*/_jsx(Pressable, {
+          style: StyleSheet.absoluteFill,
+          onPress: closeAnimated,
+          accessibilityRole: "button",
+          accessibilityLabel: t('sheet.closeA11y')
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.sheetWrap,
+        pointerEvents: "box-none",
+        children: /*#__PURE__*/_jsxs(Animated.View, {
+          style: [styles.sheet, sheetSize, {
+            paddingTop: topPad,
+            transform: [{
+              translateY: sheetY
+            }],
+            backgroundColor: colors.sheetBg,
+            borderColor: colors.border
+          }],
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.header,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.brandBlock,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [styles.brandMark, {
+                  backgroundColor: primaryColor
+                }],
+                children: branding.iconSource ? /*#__PURE__*/_jsx(Image, {
+                  source: branding.iconSource,
+                  style: styles.brandMarkImage,
+                  resizeMode: "cover"
+                }) : /*#__PURE__*/_jsx(Text, {
+                  style: styles.brandMarkText,
+                  children: branding.mark
+                })
+              }), /*#__PURE__*/_jsxs(View, {
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: [styles.title, {
+                    color: colors.text
+                  }],
+                  children: branding.name
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: [styles.subtitle, {
+                    color: colors.textSecondary
+                  }],
+                  children: branding.tagline
+                })]
+              })]
+            }), /*#__PURE__*/_jsx(Pressable, {
+              onPress: closeAnimated,
+              hitSlop: 12,
+              style: styles.closeBtn,
+              accessibilityRole: "button",
+              accessibilityLabel: t('sheet.closeA11y'),
+              children: /*#__PURE__*/_jsx(IconClose, {
+                size: 13,
+                color: colors.textSecondary
+              })
+            })]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.section, {
+              color: colors.textMuted
+            }],
+            children: t('sheet.recentTasks')
+          }), /*#__PURE__*/_jsx(FlatList, {
+            horizontal: true,
+            data: tasks,
+            keyExtractor: t => t.id,
+            style: styles.taskStrip,
+            contentContainerStyle: styles.taskStripContent,
+            showsHorizontalScrollIndicator: false,
+            ListEmptyComponent: /*#__PURE__*/_jsx(Text, {
+              style: [styles.emptyInline, {
+                color: colors.textMuted
+              }],
+              children: t('sheet.emptyTasks')
+            }),
+            renderItem: ({
+              item
+            }) => {
+              const selectedRow = item.id === selected?.id;
+              const meta = statusMeta(item.status);
+              return /*#__PURE__*/_jsxs(Pressable, {
+                style: [styles.taskChip, {
+                  backgroundColor: colors.chipBg,
+                  borderColor: colors.border
+                }, selectedRow && styles.taskChipOn],
+                onPress: () => TaskStore.selectTask(item.id),
+                onLongPress: () => confirmDeleteTask(item),
+                delayLongPress: 380,
+                accessibilityRole: "button",
+                accessibilityHint: t('sheet.deleteTask'),
+                children: [/*#__PURE__*/_jsx(View, {
+                  style: [styles.dot, {
+                    backgroundColor: meta.color
+                  }]
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.taskChipBody,
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: [styles.taskChipText, {
+                      color: colors.text
+                    }],
+                    numberOfLines: 1,
+                    children: item.title
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: [styles.taskChipMeta, {
+                      color: meta.color
+                    }],
+                    children: meta.label
+                  })]
+                })]
+              });
+            }
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.sessionHead,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.sectionTight, {
+                color: colors.textMuted
+              }],
+              children: t('sheet.timeline')
+            }), selected ? /*#__PURE__*/_jsx(Text, {
+              style: [styles.sessionHint, {
+                color: colors.textSecondary
+              }],
+              numberOfLines: 1,
+              children: selected.title
+            }) : null]
+          }), /*#__PURE__*/_jsx(FlatList, {
+            style: styles.nodeList,
+            data: selected?.nodes ?? [],
+            keyExtractor: n => n.id,
+            contentContainerStyle: (selected?.nodes.length ?? 0) === 0 ? styles.nodeListEmpty : undefined,
+            ListEmptyComponent: /*#__PURE__*/_jsxs(View, {
+              style: styles.emptyBlock,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [styles.emptyTitle, {
+                  color: colors.text
+                }],
+                children: t('sheet.emptyNodesTitle')
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.emptyHint, {
+                  color: colors.textMuted
+                }],
+                children: t('sheet.emptyNodesHint')
+              })]
+            }),
+            renderItem: ({
+              item,
+              index
+            }) => /*#__PURE__*/_jsxs(View, {
+              style: styles.nodeRow,
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.timeline,
+                children: [/*#__PURE__*/_jsx(View, {
+                  style: [styles.timelineDot, {
+                    backgroundColor: colors.textMuted
+                  }]
+                }), index < (selected?.nodes.length ?? 1) - 1 ? /*#__PURE__*/_jsx(View, {
+                  style: [styles.timelineLine, {
+                    backgroundColor: colors.border
+                  }]
+                }) : null]
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.nodeBody,
+                children: [/*#__PURE__*/_jsxs(View, {
+                  style: styles.nodeTop,
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: [styles.nodeKind, {
+                      color: colors.textMuted
+                    }],
+                    children: t(KIND_KEYS[item.kind])
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: [styles.nodeTime, {
+                      color: colors.textMuted
+                    }],
+                    children: formatTime(item.createdAt)
+                  })]
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: [styles.nodeTitle, {
+                    color: colors.text
+                  }],
+                  children: item.title
+                })]
+              })]
+            })
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.composer,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [styles.inputWrap, {
+                backgroundColor: colors.inputBg,
+                borderColor: colors.border
+              }],
+              onLayout: e => {
+                const w = Math.round(e.nativeEvent.layout.width);
+                if (w > 0 && w !== inputWidth) {
+                  setInputWidth(w);
+                  setInputHeight(estimateComposerHeight(textRef.current, w));
+                }
+              },
+              children: /*#__PURE__*/_jsx(TextInput, {
+                style: [styles.input, {
+                  minHeight: INPUT_TEXT_MIN,
+                  height: inputHeight,
+                  maxHeight: INPUT_TEXT_MAX,
+                  color: colors.text
+                }],
+                value: text,
+                onChangeText: v => {
+                  textRef.current = v;
+                  setText(v);
+                  setInputHeight(estimateComposerHeight(v, inputWidth));
+                },
+                onContentSizeChange: e => {
+                  const v = textRef.current;
+                  if (!v) {
+                    setInputHeight(INPUT_TEXT_MIN);
+                    return;
+                  }
+                  const estimated = estimateComposerHeight(v, inputWidth);
+                  const raw = e.nativeEvent.contentSize.height;
+                  const fromSize = raw > INPUT_LINE_HEIGHT + 8 ? Math.min(INPUT_TEXT_MAX, Math.max(INPUT_TEXT_MIN, Math.ceil(raw))) : INPUT_TEXT_MIN;
+                  const next = Math.max(estimated, fromSize);
+                  setInputHeight(prev => prev === next ? prev : next);
+                },
+                placeholder: inputPlaceholder,
+                placeholderTextColor: colors.textMuted,
+                editable: !running,
+                multiline: true,
+                scrollEnabled: inputHeight >= INPUT_TEXT_MAX - 1,
+                textAlignVertical: "top",
+                blurOnSubmit: false,
+                onFocus: () => setComposerFocused(true),
+                onBlur: () => setComposerFocused(false),
+                accessibilityLabel: t('sheet.inputA11y')
+              })
+            }), running ? /*#__PURE__*/_jsx(Pressable, {
+              style: [styles.btn, styles.btnStop, styles.btnIcon],
+              onPress: onStop,
+              accessibilityRole: "button",
+              accessibilityLabel: t('sheet.stopA11y'),
+              children: /*#__PURE__*/_jsx(IconStop, {
+                size: 12,
+                color: "#fff"
+              })
+            }) : /*#__PURE__*/_jsx(Pressable, {
+              style: [styles.btn, styles.btnSend, {
+                backgroundColor: primaryColor
+              }, !text.trim() && styles.btnDisabled],
+              onPress: onSend,
+              disabled: !text.trim(),
+              children: busy ? /*#__PURE__*/_jsx(ActivityIndicator, {
+                color: "#fff"
+              }) : /*#__PURE__*/_jsx(Text, {
+                style: styles.btnText,
+                children: t('sheet.send')
+              })
+            })]
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.handle, {
+              backgroundColor: colors.handle
+            }]
+          })]
+        })
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    justifyContent: 'flex-start'
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 0
+  },
+  sheetWrap: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    zIndex: 1
+  },
+  sheet: {
+    // Definite height above bounds the flexible, scrolling step list.
+    backgroundColor: SHEET_BG_FALLBACK,
+    borderBottomLeftRadius: 22,
+    borderBottomRightRadius: 22,
+    paddingHorizontal: 16,
+    paddingBottom: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(255,255,255,0.08)',
+    borderTopWidth: 0
+  },
+  handle: {
+    alignSelf: 'center',
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: 'rgba(255,255,255,0.22)',
+    marginTop: 12
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 18
+  },
+  brandBlock: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    flexShrink: 1
+  },
+  brandMark: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    backgroundColor: '#0A84FF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden'
+  },
+  brandMarkImage: {
+    width: 36,
+    height: 36
+  },
+  brandMarkText: {
+    color: '#fff',
+    fontSize: 17,
+    fontWeight: '800'
+  },
+  title: {
+    color: '#F4F4F5',
+    fontSize: 18,
+    fontWeight: '800',
+    letterSpacing: -0.3
+  },
+  subtitle: {
+    color: 'rgba(255,255,255,0.42)',
+    fontSize: 12,
+    marginTop: 2
+  },
+  closeBtn: {
+    width: 32,
+    height: 32,
+    borderRadius: 10,
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  section: {
+    color: 'rgba(255,255,255,0.38)',
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 0.6,
+    textTransform: 'uppercase',
+    marginBottom: 10
+  },
+  sectionTight: {
+    color: 'rgba(255,255,255,0.38)',
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 0.6,
+    textTransform: 'uppercase'
+  },
+  taskStrip: {
+    maxHeight: 64,
+    // The sheet shrinks to fit above the keyboard; without this the strip
+    // gives way first and clips its chips instead of the step list scrolling.
+    flexGrow: 0,
+    flexShrink: 0,
+    marginBottom: 16
+  },
+  taskStripContent: {
+    alignItems: 'center',
+    paddingRight: 8
+  },
+  taskChip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 14,
+    backgroundColor: 'rgba(255,255,255,0.05)',
+    marginRight: 8,
+    maxWidth: 200,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(255,255,255,0.06)'
+  },
+  taskChipOn: {
+    backgroundColor: 'rgba(10,132,255,0.18)',
+    borderColor: 'rgba(10,132,255,0.35)'
+  },
+  taskChipBody: {
+    flexShrink: 1
+  },
+  taskChipText: {
+    color: '#F4F4F5',
+    fontSize: 13,
+    fontWeight: '600'
+  },
+  taskChipMeta: {
+    fontSize: 10,
+    fontWeight: '600',
+    marginTop: 2
+  },
+  emptyInline: {
+    color: 'rgba(255,255,255,0.35)',
+    fontSize: 13,
+    paddingVertical: 12
+  },
+  sessionHead: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+    gap: 12,
+    marginBottom: 10
+  },
+  sessionHint: {
+    flexShrink: 1,
+    color: 'rgba(255,255,255,0.35)',
+    fontSize: 12
+  },
+  nodeList: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minHeight: 0,
+    maxHeight: Math.round(Dimensions.get('window').height * 0.42),
+    marginBottom: 14
+  },
+  nodeListEmpty: {
+    minHeight: 120,
+    justifyContent: 'center'
+  },
+  emptyBlock: {
+    alignItems: 'center',
+    paddingVertical: 28,
+    paddingHorizontal: 20
+  },
+  emptyTitle: {
+    color: 'rgba(255,255,255,0.55)',
+    fontSize: 15,
+    fontWeight: '600',
+    marginBottom: 6
+  },
+  emptyHint: {
+    color: 'rgba(255,255,255,0.32)',
+    fontSize: 13,
+    textAlign: 'center',
+    lineHeight: 18
+  },
+  nodeRow: {
+    flexDirection: 'row',
+    paddingBottom: 4
+  },
+  timeline: {
+    width: 16,
+    alignItems: 'center',
+    marginRight: 10
+  },
+  timelineDot: {
+    width: 7,
+    height: 7,
+    borderRadius: 4,
+    backgroundColor: '#0A84FF',
+    marginTop: 5
+  },
+  timelineLine: {
+    width: 1,
+    flex: 1,
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    marginTop: 4,
+    marginBottom: 2
+  },
+  nodeBody: {
+    flex: 1,
+    paddingBottom: 14
+  },
+  nodeTop: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 3
+  },
+  nodeKind: {
+    color: '#7DD3FC',
+    fontSize: 10,
+    fontWeight: '700',
+    letterSpacing: 0.3
+  },
+  nodeTime: {
+    color: 'rgba(255,255,255,0.28)',
+    fontSize: 11,
+    fontVariant: ['tabular-nums']
+  },
+  nodeTitle: {
+    color: '#ECECF0',
+    fontSize: 14,
+    lineHeight: 20
+  },
+  dot: {
+    width: 7,
+    height: 7,
+    borderRadius: 4,
+    marginRight: 8
+  },
+  composer: {
+    flexShrink: 0,
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: 8,
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    borderRadius: 16,
+    paddingLeft: 14,
+    paddingRight: 10,
+    paddingVertical: 6,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(255,255,255,0.08)'
+  },
+  inputWrap: {
+    flex: 1,
+    paddingVertical: 8,
+    paddingHorizontal: 6,
+    justifyContent: 'center'
+  },
+  input: {
+    width: '100%',
+    color: '#F4F4F5',
+    fontSize: INPUT_FONT_SIZE,
+    lineHeight: INPUT_LINE_HEIGHT,
+    paddingHorizontal: 2,
+    paddingVertical: 0,
+    margin: 0
+  },
+  btn: {
+    minWidth: 68,
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 2
+  },
+  btnIcon: {
+    minWidth: 44,
+    paddingHorizontal: 12
+  },
+  btnSend: {
+    backgroundColor: '#0A84FF'
+  },
+  btnStop: {
+    backgroundColor: '#FF453A'
+  },
+  btnDisabled: {
+    opacity: 0.4
+  },
+  btnText: {
+    color: '#fff',
+    fontWeight: '700',
+    fontSize: 14
+  }
+});
+//# sourceMappingURL=KokoChatSheet.js.map