upfynai-code 0.1.0

package/src/statusline-core/themes/tokyo-night.sh

@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+# Theme: Tokyo Night (vibrant neon)
+THEME_NAME="Tokyo Night"
+
+CLR_RST='\033[0m'
+CLR_BOLD='\033[1m'
+CLR_DIM='\033[2m'
+
+CLR_SKILL='\033[38;2;255;117;127m'       # Red/pink
+CLR_MODEL='\033[38;2;187;154;247m'       # Purple
+CLR_DIR='\033[38;2;125;207;255m'         # Cyan
+CLR_GITHUB='\033[38;2;192;202;245m'      # Foreground
+CLR_TOKENS='\033[38;2;224;175;104m'      # Yellow/orange
+CLR_COST='\033[38;2;158;206;106m'        # Green
+CLR_VIM='\033[38;2;115;218;202m'         # Teal
+CLR_AGENT='\033[38;2;122;162;247m'       # Blue
+
+CLR_CTX_LOW='\033[38;2;192;202;245m'     # Foreground
+CLR_CTX_MED='\033[38;2;255;158;100m'     # Orange
+CLR_CTX_HIGH='\033[38;2;247;118;142m'    # Red
+CLR_CTX_CRIT='\033[38;2;219;75;75m'      # Deep red
+
+CLR_SEP='\033[38;2;59;66;97m'            # Comment color
+CLR_BAR_EMPTY='\033[38;2;41;46;66m'      # Dark bg
+CLR_LABEL='\033[38;2;86;95;137m'         # Muted
+
+CLR_GIT_STAGED='\033[38;2;158;206;106m'
+CLR_GIT_UNSTAGED='\033[38;2;224;175;104m'
+
+BAR_FILLED='█'
+BAR_EMPTY='░'
+SEP_CHAR='│'

package/src/store/canvas-store.ts

@@ -0,0 +1,50 @@
+import { create } from 'zustand';
+import type { CanvasNode, CanvasEdge } from '../types/canvas-graph';
+
+interface CanvasState {
+  nodes: CanvasNode[];
+  edges: CanvasEdge[];
+  lastNodeId: string | null;
+
+  addNode: (node: Omit<CanvasNode, 'x' | 'y'>) => void;
+  clear: () => void;
+}
+
+const NODE_SPACING_Y = 120;
+const NODE_START_X = 100;
+const NODE_START_Y = 100;
+
+export const useCanvasStore = create<CanvasState>((set, get) => ({
+  nodes: [],
+  edges: [],
+  lastNodeId: null,
+
+  addNode: (partial) => {
+    const { nodes, edges, lastNodeId } = get();
+    const y = NODE_START_Y + nodes.length * NODE_SPACING_Y;
+    const x = NODE_START_X;
+
+    const node: CanvasNode = {
+      ...partial,
+      x,
+      y,
+    };
+
+    const newEdges = [...edges];
+    if (lastNodeId) {
+      newEdges.push({
+        id: `edge-${lastNodeId}-${node.id}`,
+        fromId: lastNodeId,
+        toId: node.id,
+      });
+    }
+
+    set({
+      nodes: [...nodes, node],
+      edges: newEdges,
+      lastNodeId: node.id,
+    });
+  },
+
+  clear: () => set({ nodes: [], edges: [], lastNodeId: null }),
+}));

package/src/store/chat-store.ts

@@ -0,0 +1,60 @@
+import { create } from 'zustand';
+import type { ChatMessage, TokenUsage } from '../types/sdk-messages';
+
+interface ChatState {
+  messages: ChatMessage[];
+  streamingText: string;
+  streamingToolName: string;
+  input: string;
+  isWaiting: boolean;
+
+  addMessage: (msg: ChatMessage) => void;
+  appendStreamDelta: (text: string) => void;
+  setStreamingToolName: (name: string) => void;
+  finalizeStreaming: (usage?: TokenUsage) => void;
+  setInput: (input: string) => void;
+  setWaiting: (waiting: boolean) => void;
+  clearMessages: () => void;
+}
+
+let messageCounter = 0;
+
+export const useChatStore = create<ChatState>((set, get) => ({
+  messages: [],
+  streamingText: '',
+  streamingToolName: '',
+  input: '',
+  isWaiting: false,
+
+  addMessage: (msg) => set((s) => ({
+    messages: [...s.messages, msg],
+  })),
+
+  appendStreamDelta: (text) => set((s) => ({
+    streamingText: s.streamingText + text,
+  })),
+
+  setStreamingToolName: (name) => set({ streamingToolName: name }),
+
+  finalizeStreaming: (usage) => {
+    const { streamingText, messages } = get();
+    if (streamingText) {
+      set({
+        messages: [...messages, {
+          id: `msg-${++messageCounter}`,
+          role: 'assistant',
+          content: streamingText,
+          timestamp: Date.now(),
+          usage,
+        }],
+        streamingText: '',
+        streamingToolName: '',
+        isWaiting: false,
+      });
+    }
+  },
+
+  setInput: (input) => set({ input }),
+  setWaiting: (waiting) => set({ isWaiting: waiting }),
+  clearMessages: () => set({ messages: [], streamingText: '', streamingToolName: '' }),
+}));

package/src/store/permission-store.ts

@@ -0,0 +1,29 @@
+import { create } from 'zustand';
+
+export interface PendingPermission {
+  requestId: string;
+  toolName: string;
+  toolInput: Record<string, unknown>;
+  timestamp: number;
+}
+
+interface PermissionState {
+  pending: PendingPermission[];
+  addRequest: (req: PendingPermission) => void;
+  removeRequest: (requestId: string) => void;
+  clearAll: () => void;
+}
+
+export const usePermissionStore = create<PermissionState>((set) => ({
+  pending: [],
+
+  addRequest: (req) => set((s) => ({
+    pending: [...s.pending, req],
+  })),
+
+  removeRequest: (requestId) => set((s) => ({
+    pending: s.pending.filter((p) => p.requestId !== requestId),
+  })),
+
+  clearAll: () => set({ pending: [] }),
+}));

package/src/store/session-store.ts

@@ -0,0 +1,52 @@
+import { create } from 'zustand';
+
+interface SessionState {
+  sessionId: string | null;
+  model: string;
+  cwd: string;
+  tools: string[];
+  permissionMode: string;
+  isConnected: boolean;
+  isStreaming: boolean;
+
+  setInit: (data: {
+    sessionId: string;
+    model: string;
+    cwd: string;
+    tools: string[];
+    permissionMode: string;
+  }) => void;
+  setCwd: (cwd: string) => void;
+  setModel: (model: string) => void;
+  setStreaming: (streaming: boolean) => void;
+  setConnected: (connected: boolean) => void;
+  reset: () => void;
+}
+
+export const useSessionStore = create<SessionState>((set) => ({
+  sessionId: null,
+  model: 'unknown',
+  cwd: '',
+  tools: [],
+  permissionMode: 'default',
+  isConnected: false,
+  isStreaming: false,
+
+  setInit: (data) => set({
+    sessionId: data.sessionId,
+    model: data.model,
+    cwd: data.cwd,
+    tools: data.tools,
+    permissionMode: data.permissionMode,
+    isConnected: true,
+  }),
+
+  setCwd: (cwd) => set({ cwd }),
+  setModel: (model) => set({ model }),
+  setStreaming: (streaming) => set({ isStreaming: streaming }),
+  setConnected: (connected) => set({ isConnected: connected }),
+  reset: () => set({
+    sessionId: null, model: 'unknown', cwd: '', tools: [],
+    permissionMode: 'default', isConnected: false, isStreaming: false,
+  }),
+}));

package/src/store/statusline-store.ts

@@ -0,0 +1,160 @@
+import { create } from 'zustand';
+import type { StatuslineData } from '../types/statusline-fields';
+import { DEFAULT_STATUSLINE } from '../types/statusline-fields';
+import type { TokenUsage, ModelUsageEntry } from '../types/sdk-messages';
+
+// Port of skill-statusline helpers
+export function fmtTok(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${Math.round(n / 1_000)}k`;
+  return String(n);
+}
+
+export function fmtDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const sec = Math.floor(ms / 1000);
+  if (sec < 60) return `${sec}s`;
+  const min = Math.floor(sec / 60);
+  const rem = sec % 60;
+  if (min < 60) return rem > 0 ? `${min}m${rem}s` : `${min}m`;
+  const hr = Math.floor(min / 60);
+  const remMin = min % 60;
+  return `${hr}h${remMin}m`;
+}
+
+export function fmtCost(usd: number): string {
+  if (usd === 0) return '$0.00';
+  if (usd < 0.01) return `$${usd.toFixed(4)}`;
+  return `$${usd.toFixed(2)}`;
+}
+
+// Parse model ID → clean display name (port of core.sh logic)
+export function parseModelName(modelId: string): string {
+  const familyMatch = modelId.match(/^claude-([a-z]+)-/);
+  if (!familyMatch) return modelId;
+  const family = familyMatch[1].charAt(0).toUpperCase() + familyMatch[1].slice(1);
+  const verMatch = modelId.match(/-(\d)-(\d)$/);
+  if (verMatch) return `${family} ${verMatch[1]}.${verMatch[2]}`;
+  const verDateMatch = modelId.match(/-(\d)-\d{8}$/);
+  if (verDateMatch) return `${family} ${verDateMatch[1]}`;
+  return family;
+}
+
+// Tool name → skill label (port of core.sh case statement)
+const SKILL_MAP: Record<string, string> = {
+  Task: 'Agent', Read: 'Read', Write: 'Write', Edit: 'Edit',
+  MultiEdit: 'Multi Edit', Glob: 'Search(Files)', Grep: 'Search(Content)',
+  Bash: 'Terminal', WebSearch: 'Web Search', WebFetch: 'Web Fetch',
+  Skill: 'Skill', AskUserQuestion: 'Asking...', EnterPlanMode: 'Planning',
+  ExitPlanMode: 'Plan Ready', TaskCreate: 'Task Create', TaskUpdate: 'Task Update',
+  NotebookEdit: 'Notebook',
+};
+
+interface StatuslineState extends StatuslineData {
+  updateFromInit: (model: string, cwd: string, sessionId: string, permissionMode: string) => void;
+  updateFromUsage: (usage: TokenUsage) => void;
+  updateFromResult: (data: {
+    cost: number; duration: number; numTurns: number;
+    usage: TokenUsage; modelUsage?: Record<string, ModelUsageEntry>;
+  }) => void;
+  updateSkill: (toolName: string) => void;
+  markCompaction: (preTokens: number) => void;
+  updateGit: (data: {
+    branch: string; ghUser: string; ghRepo: string;
+    staged: boolean; unstaged: boolean;
+  }) => void;
+  reset: () => void;
+}
+
+export const useStatuslineStore = create<StatuslineState>((set, get) => ({
+  ...DEFAULT_STATUSLINE,
+
+  updateFromInit: (modelId, cwd, sessionId, permissionMode) => {
+    const model = parseModelName(modelId);
+    const parts = cwd.replace(/\\/g, '/').split('/').filter(Boolean);
+    const dirShort = parts.length > 3
+      ? parts.slice(-3).join('/')
+      : parts.length > 0 ? parts.slice(-2).join('/') : '~';
+
+    set({ model, modelId, cwd, dirShort, sessionId, permissionMode });
+  },
+
+  updateFromUsage: (usage) => {
+    const s = get();
+    const inputTokens = usage.input_tokens || 0;
+    const outputTokens = usage.output_tokens || 0;
+    const cacheCreate = usage.cache_creation_input_tokens || 0;
+    const cacheRead = usage.cache_read_input_tokens || 0;
+
+    // Context % = (input + cache_creation + cache_read) / context_size
+    const contextUsed = inputTokens + cacheCreate + cacheRead;
+    const contextPct = s.contextSize > 0
+      ? Math.min(100, Math.round((contextUsed / s.contextSize) * 100))
+      : 0;
+
+    let compactionWarning = '';
+    let isCompacting = false;
+    if (contextPct >= 95) {
+      compactionWarning = 'COMPACTING';
+      isCompacting = true;
+    } else if (contextPct >= 85) {
+      compactionWarning = `${100 - contextPct}% left`;
+    }
+
+    set({
+      tokensWinIn: inputTokens,
+      tokensWinOut: outputTokens,
+      tokensCumIn: s.tokensCumIn + inputTokens,
+      tokensCumOut: s.tokensCumOut + outputTokens,
+      cacheCreate,
+      cacheRead,
+      contextUsed,
+      contextPct,
+      contextRemaining: 100 - contextPct,
+      compactionWarning,
+      isCompacting,
+    });
+  },
+
+  updateFromResult: (data) => {
+    const contextSize = data.modelUsage
+      ? Object.values(data.modelUsage)[0]?.contextWindow || 200000
+      : 200000;
+
+    set({
+      cost: data.cost,
+      costFormatted: fmtCost(data.cost),
+      duration: data.duration,
+      durationFormatted: fmtDuration(data.duration),
+      numTurns: data.numTurns,
+      contextSize,
+    });
+
+    // Recompute burn rate
+    if (data.duration > 60000 && data.cost > 0) {
+      const rate = data.cost / (data.duration / 60000);
+      set({ burnRate: `$${rate.toFixed(2)}/m` });
+    }
+  },
+
+  updateSkill: (toolName) => {
+    set({ skill: SKILL_MAP[toolName] || toolName });
+  },
+
+  markCompaction: (preTokens) => {
+    set({ isCompacting: true, compactionWarning: 'COMPACTING' });
+  },
+
+  updateGit: (data) => {
+    const github = data.ghRepo
+      ? `${data.ghUser}/${data.ghRepo}/${data.branch}`
+      : data.branch;
+    set({
+      branch: data.branch,
+      gitDirty: { staged: data.staged, unstaged: data.unstaged },
+      github,
+    });
+  },
+
+  reset: () => set(DEFAULT_STATUSLINE),
+}));

package/src/styles/global.css

@@ -0,0 +1,117 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+:root {
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  --radius: 8px;
+  --radius-sm: 4px;
+  --radius-lg: 12px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border, #2a2a32);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted, #787882);
+}
+
+/* Selection */
+::selection {
+  background: var(--color-accent, #a855f7);
+  color: white;
+}
+
+/* Code blocks */
+code, pre {
+  font-family: var(--font-mono);
+}
+
+pre {
+  overflow-x: auto;
+  border-radius: var(--radius);
+  padding: 12px 16px;
+}
+
+/* Markdown content */
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3 {
+  margin-top: 16px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.markdown-content p {
+  margin-bottom: 8px;
+}
+
+.markdown-content ul, .markdown-content ol {
+  margin-left: 20px;
+  margin-bottom: 8px;
+}
+
+.markdown-content code:not(pre code) {
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  font-size: 0.9em;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.2s ease-out;
+}
+
+.animate-pulse {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.animate-slide-up {
+  animation: slideUp 0.3s ease-out;
+}

package/src/themes/index.ts

@@ -0,0 +1,149 @@
+import { create } from 'zustand';
+
+export interface ThemeColors {
+  skill: string;
+  model: string;
+  dir: string;
+  github: string;
+  tokens: string;
+  cost: string;
+  vim: string;
+  agent: string;
+  ctxLow: string;
+  ctxMed: string;
+  ctxHigh: string;
+  ctxCrit: string;
+  separator: string;
+  barEmpty: string;
+  barFilled: string;
+  label: string;
+  gitStaged: string;
+  gitUnstaged: string;
+  // UI colors
+  bg: string;
+  bgSurface: string;
+  bgPanel: string;
+  bgHover: string;
+  text: string;
+  textMuted: string;
+  textDim: string;
+  border: string;
+  accent: string;
+  error: string;
+  success: string;
+  warning: string;
+}
+
+export interface ThemeDefinition {
+  name: string;
+  id: string;
+  colors: ThemeColors;
+}
+
+// Ported from themes/default.sh — RGB values extracted from ANSI escape codes
+export const defaultTheme: ThemeDefinition = {
+  name: 'Default',
+  id: 'default',
+  colors: {
+    skill: '#ec4899', model: '#a855f7', dir: '#06b6d4', github: '#e4e4e7',
+    tokens: '#f59e0b', cost: '#22c55e', vim: '#2dd4bf', agent: '#60a5fa',
+    ctxLow: '#e4e4e7', ctxMed: '#fb923c', ctxHigh: '#ef4444', ctxCrit: '#dc2626',
+    separator: '#37373e', barEmpty: '#28282d', barFilled: '#e4e4e7',
+    label: '#787882', gitStaged: '#22c55e', gitUnstaged: '#f59e0b',
+    bg: '#0a0a0f', bgSurface: '#141419', bgPanel: '#1a1a22', bgHover: '#24242e',
+    text: '#e4e4e7', textMuted: '#787882', textDim: '#505058',
+    border: '#2a2a32', accent: '#a855f7', error: '#ef4444', success: '#22c55e', warning: '#f59e0b',
+  },
+};
+
+// Ported from themes/nord.sh
+export const nordTheme: ThemeDefinition = {
+  name: 'Nord',
+  id: 'nord',
+  colors: {
+    skill: '#88c0d0', model: '#81a1c1', dir: '#8fbcbb', github: '#d8dee9',
+    tokens: '#ebcb8b', cost: '#a3be8c', vim: '#88c0d0', agent: '#81a1c1',
+    ctxLow: '#d8dee9', ctxMed: '#d08770', ctxHigh: '#bf616a', ctxCrit: '#bf616a',
+    separator: '#434c5e', barEmpty: '#3b4252', barFilled: '#d8dee9',
+    label: '#616e88', gitStaged: '#a3be8c', gitUnstaged: '#ebcb8b',
+    bg: '#2e3440', bgSurface: '#3b4252', bgPanel: '#434c5e', bgHover: '#4c566a',
+    text: '#d8dee9', textMuted: '#616e88', textDim: '#4c566a',
+    border: '#434c5e', accent: '#81a1c1', error: '#bf616a', success: '#a3be8c', warning: '#ebcb8b',
+  },
+};
+
+// Ported from themes/tokyo-night.sh
+export const tokyoNightTheme: ThemeDefinition = {
+  name: 'Tokyo Night',
+  id: 'tokyo-night',
+  colors: {
+    skill: '#f7768e', model: '#bb9af7', dir: '#7dcfff', github: '#a9b1d6',
+    tokens: '#e0af68', cost: '#9ece6a', vim: '#2ac3de', agent: '#7aa2f7',
+    ctxLow: '#a9b1d6', ctxMed: '#ff9e64', ctxHigh: '#f7768e', ctxCrit: '#db4b4b',
+    separator: '#3b4261', barEmpty: '#1f2335', barFilled: '#a9b1d6',
+    label: '#565f89', gitStaged: '#9ece6a', gitUnstaged: '#e0af68',
+    bg: '#1a1b26', bgSurface: '#1f2335', bgPanel: '#24283b', bgHover: '#292e42',
+    text: '#a9b1d6', textMuted: '#565f89', textDim: '#3b4261',
+    border: '#3b4261', accent: '#bb9af7', error: '#f7768e', success: '#9ece6a', warning: '#e0af68',
+  },
+};
+
+// Ported from themes/catppuccin.sh (Mocha)
+export const catppuccinTheme: ThemeDefinition = {
+  name: 'Catppuccin',
+  id: 'catppuccin',
+  colors: {
+    skill: '#f38ba8', model: '#cba6f7', dir: '#89dceb', github: '#cdd6f4',
+    tokens: '#f9e2af', cost: '#a6e3a1', vim: '#94e2d5', agent: '#89b4fa',
+    ctxLow: '#cdd6f4', ctxMed: '#fab387', ctxHigh: '#f38ba8', ctxCrit: '#eba0ac',
+    separator: '#45475a', barEmpty: '#313244', barFilled: '#cdd6f4',
+    label: '#6c7086', gitStaged: '#a6e3a1', gitUnstaged: '#f9e2af',
+    bg: '#1e1e2e', bgSurface: '#24243a', bgPanel: '#313244', bgHover: '#45475a',
+    text: '#cdd6f4', textMuted: '#6c7086', textDim: '#45475a',
+    border: '#45475a', accent: '#cba6f7', error: '#f38ba8', success: '#a6e3a1', warning: '#f9e2af',
+  },
+};
+
+// Ported from themes/gruvbox.sh
+export const gruvboxTheme: ThemeDefinition = {
+  name: 'Gruvbox',
+  id: 'gruvbox',
+  colors: {
+    skill: '#d3869b', model: '#b16286', dir: '#83a598', github: '#ebdbb2',
+    tokens: '#fabd2f', cost: '#b8bb26', vim: '#83a598', agent: '#83a598',
+    ctxLow: '#ebdbb2', ctxMed: '#fe8019', ctxHigh: '#fb4934', ctxCrit: '#cc241d',
+    separator: '#504945', barEmpty: '#3c3836', barFilled: '#ebdbb2',
+    label: '#7c6f64', gitStaged: '#b8bb26', gitUnstaged: '#fabd2f',
+    bg: '#282828', bgSurface: '#3c3836', bgPanel: '#504945', bgHover: '#665c54',
+    text: '#ebdbb2', textMuted: '#7c6f64', textDim: '#504945',
+    border: '#504945', accent: '#b16286', error: '#fb4934', success: '#b8bb26', warning: '#fabd2f',
+  },
+};
+
+export const THEMES: ThemeDefinition[] = [
+  defaultTheme, nordTheme, tokyoNightTheme, catppuccinTheme, gruvboxTheme,
+];
+
+interface ThemeState {
+  activeTheme: ThemeDefinition;
+  setTheme: (id: string) => void;
+}
+
+export const useThemeStore = create<ThemeState>((set) => ({
+  activeTheme: defaultTheme,
+  setTheme: (id) => {
+    const theme = THEMES.find((t) => t.id === id) || defaultTheme;
+    set({ activeTheme: theme });
+    // Persist choice
+    try { localStorage.setItem('upfynai-theme', id); } catch {}
+  },
+}));
+
+// Load persisted theme
+try {
+  const saved = localStorage.getItem('upfynai-theme');
+  if (saved) {
+    const theme = THEMES.find((t) => t.id === saved);
+    if (theme) useThemeStore.setState({ activeTheme: theme });
+  }
+} catch {}

package/src/types/canvas-graph.ts

@@ -0,0 +1,24 @@
+// Canvas node/edge types for tldraw visualization
+
+export type CanvasNodeType =
+  | 'session'
+  | 'toolCall'
+  | 'toolResult'
+  | 'textResponse'
+  | 'compaction';
+
+export interface CanvasNode {
+  id: string;
+  type: CanvasNodeType;
+  label: string;
+  data: Record<string, unknown>;
+  x: number;
+  y: number;
+  timestamp: number;
+}
+
+export interface CanvasEdge {
+  id: string;
+  fromId: string;
+  toId: string;
+}