@renxqoo/renx-code 0.0.3 → 0.0.4

package/src/components/chat/segment-groups.ts

@@ -0,0 +1,106 @@
+import type { ReplySegment } from '../../types/chat';
+
+type ToolSegmentKind = 'use' | 'stream' | 'result';
+
+export type ToolSegmentMeta = {
+  kind: ToolSegmentKind;
+  toolCallId: string;
+  channel?: 'stdout' | 'stderr';
+};
+
+export type ToolSegmentGroup = {
+  toolCallId: string;
+  use?: ReplySegment;
+  streams: ReplySegment[];
+  result?: ReplySegment;
+};
+
+export type ReplyRenderItem =
+  | {
+      type: 'segment';
+      segment: ReplySegment;
+    }
+  | {
+      type: 'tool';
+      group: ToolSegmentGroup;
+    };
+
+export const parseToolSegmentMeta = (segmentId: string): ToolSegmentMeta | null => {
+  const toolUseMatch = segmentId.match(/^\d+:tool-use:(.+)$/);
+  if (toolUseMatch && toolUseMatch[1]) {
+    return {
+      kind: 'use',
+      toolCallId: toolUseMatch[1],
+    };
+  }
+
+  const toolResultMatch = segmentId.match(/^\d+:tool-result:(.+)$/);
+  if (toolResultMatch && toolResultMatch[1]) {
+    return {
+      kind: 'result',
+      toolCallId: toolResultMatch[1],
+    };
+  }
+
+  const toolStreamMatch = segmentId.match(/^\d+:tool:([^:]+):(stdout|stderr)$/);
+  if (toolStreamMatch && toolStreamMatch[1] && toolStreamMatch[2]) {
+    return {
+      kind: 'stream',
+      toolCallId: toolStreamMatch[1],
+      channel: toolStreamMatch[2] as 'stdout' | 'stderr',
+    };
+  }
+
+  return null;
+};
+
+export const buildReplyRenderItems = (segments: ReplySegment[]): ReplyRenderItem[] => {
+  const items: ReplyRenderItem[] = [];
+  let activeGroup: ToolSegmentGroup | null = null;
+
+  const flushActiveGroup = () => {
+    if (!activeGroup) {
+      return;
+    }
+    items.push({
+      type: 'tool',
+      group: activeGroup,
+    });
+    activeGroup = null;
+  };
+
+  for (const segment of segments) {
+    const meta = parseToolSegmentMeta(segment.id);
+    if (!meta) {
+      flushActiveGroup();
+      items.push({
+        type: 'segment',
+        segment,
+      });
+      continue;
+    }
+
+    if (!activeGroup || activeGroup.toolCallId !== meta.toolCallId) {
+      flushActiveGroup();
+      activeGroup = {
+        toolCallId: meta.toolCallId,
+        streams: [],
+      };
+    }
+
+    if (meta.kind === 'use') {
+      activeGroup.use = segment;
+      continue;
+    }
+
+    if (meta.kind === 'result') {
+      activeGroup.result = segment;
+      continue;
+    }
+
+    activeGroup.streams.push(segment);
+  }
+
+  flushActiveGroup();
+  return items;
+};

package/src/components/chat/turn-item.tsx

@@ -0,0 +1,39 @@
+import type { ChatTurn } from '../../types/chat';
+import { uiTheme } from '../../ui/theme';
+import { AssistantReply } from './assistant-reply';
+import { PromptCard } from './prompt-card';
+
+type TurnItemProps = {
+  turn: ChatTurn;
+  index: number;
+  isPending?: boolean;
+};
+
+const PendingReply = () => {
+  return (
+    <box flexDirection="row">
+      <box width={1} backgroundColor={uiTheme.divider} />
+      <box flexGrow={1} paddingLeft={2}>
+        <text attributes={uiTheme.typography.body} selectable={true}>
+          <i fg={uiTheme.thinking}>Thinking:</i>
+          <span fg={uiTheme.muted}> preparing response...</span>
+        </text>
+      </box>
+    </box>
+  );
+};
+
+export const TurnItem = ({ turn, index, isPending = false }: TurnItemProps) => {
+  return (
+    <box flexDirection="column">
+      <PromptCard
+        prompt={turn.prompt}
+        files={turn.files}
+        createdAtMs={turn.createdAtMs}
+        isFirst={index === 0}
+      />
+      {turn.reply ? <AssistantReply reply={turn.reply} /> : null}
+      {isPending && !turn.reply ? <PendingReply /> : null}
+    </box>
+  );
+};

package/src/components/conversation-panel.tsx

@@ -0,0 +1,43 @@
+import type { ChatTurn } from '../types/chat';
+import { uiTheme } from '../ui/theme';
+import { TurnItem } from './chat/turn-item';
+
+type ConversationPanelProps = {
+  turns: ChatTurn[];
+  isThinking: boolean;
+};
+
+export const ConversationPanel = ({ turns, isThinking }: ConversationPanelProps) => {
+  const pendingTurnId = turns.at(-1)?.id;
+
+  return (
+    <scrollbox
+      flexGrow={1}
+      scrollY
+      stickyScroll
+      stickyStart="bottom"
+      paddingX={uiTheme.layout.conversationPaddingX}
+      paddingY={uiTheme.layout.conversationPaddingY}
+      viewportOptions={{ backgroundColor: uiTheme.bg }}
+      contentOptions={{ backgroundColor: uiTheme.bg }}
+      marginBottom={1}
+    >
+      <box
+        flexDirection="column"
+        gap={0}
+        paddingX={uiTheme.layout.conversationContentPaddingX}
+        paddingY={uiTheme.layout.conversationContentPaddingY}
+        backgroundColor={uiTheme.bg}
+      >
+        {turns.map((turn, index) => (
+          <TurnItem
+            key={turn.id}
+            turn={turn}
+            index={index}
+            isPending={isThinking && turn.id === pendingTurnId}
+          />
+        ))}
+      </box>
+    </scrollbox>
+  );
+};

package/src/components/file-mention-menu.tsx

@@ -0,0 +1,77 @@
+import type { PromptFileSelection } from '../files/types';
+import { TextAttributes } from '@opentui/core';
+
+import { uiTheme } from '../ui/theme';
+
+type FileMentionMenuProps = {
+  visible: boolean;
+  loading: boolean;
+  error: string | null;
+  options: PromptFileSelection[];
+  selectedIndex: number;
+};
+
+const selectedBackground = '#f4b183';
+const selectedForeground = '#050608';
+
+export const FileMentionMenu = ({
+  visible,
+  loading,
+  error,
+  options,
+  selectedIndex,
+}: FileMentionMenuProps) => {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <box
+      width="100%"
+      flexShrink={0}
+      backgroundColor={uiTheme.panel}
+      border={['top', 'bottom', 'left', 'right']}
+      borderColor={uiTheme.divider}
+      marginBottom={0}
+      height={Math.min(11, Math.max(3, options.length + 2))}
+    >
+      <scrollbox scrollY stickyScroll stickyStart="top" scrollbarOptions={{ visible: false }}>
+        <box flexDirection="column" backgroundColor={uiTheme.panel}>
+          {loading ? (
+            <box paddingX={1}>
+              <text fg={uiTheme.muted}>Loading files...</text>
+            </box>
+          ) : error ? (
+            <box paddingX={1}>
+              <text fg="#ff8d8d">{error}</text>
+            </box>
+          ) : options.length === 0 ? (
+            <box paddingX={1}>
+              <text fg={uiTheme.muted}>No matching file</text>
+            </box>
+          ) : (
+            options.map((option, index) => {
+              const isSelected = index === selectedIndex;
+              return (
+                <box
+                  key={option.absolutePath}
+                  flexDirection="row"
+                  paddingX={1}
+                  backgroundColor={isSelected ? selectedBackground : uiTheme.panel}
+                >
+                  <text
+                    fg={isSelected ? selectedForeground : uiTheme.text}
+                    attributes={TextAttributes.BOLD}
+                    flexShrink={0}
+                  >
+                    @{`/${option.relativePath}`}
+                  </text>
+                </box>
+              );
+            })
+          )}
+        </box>
+      </scrollbox>
+    </box>
+  );
+};

package/src/components/file-picker-dialog.tsx

@@ -0,0 +1,206 @@
+import type { KeyEvent, TextareaRenderable } from '@opentui/core';
+import { TextAttributes } from '@opentui/core';
+import { useEffect, useRef } from 'react';
+
+import type { PromptFileSelection } from '../files/types';
+import { uiTheme } from '../ui/theme';
+
+type FilePickerDialogProps = {
+  visible: boolean;
+  viewportWidth: number;
+  viewportHeight: number;
+  loading: boolean;
+  error: string | null;
+  search: string;
+  options: PromptFileSelection[];
+  selectedIndex: number;
+  selectedPaths: Set<string>;
+  onSearchChange: (value: string) => void;
+  onSelectIndex: (index: number) => void;
+  onToggleSelected: () => void;
+  onConfirm: () => void;
+  onListKeyDown: (event: KeyEvent) => boolean;
+};
+
+const selectedBackground = '#f4b183';
+const selectedForeground = '#050608';
+
+const formatSize = (size: number) => {
+  if (size < 1024) {
+    return `${size} B`;
+  }
+  if (size < 1024 * 1024) {
+    return `${(size / 1024).toFixed(1)} KB`;
+  }
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+export const FilePickerDialog = ({
+  visible,
+  viewportWidth,
+  viewportHeight,
+  loading,
+  error,
+  search,
+  options,
+  selectedIndex,
+  selectedPaths,
+  onSearchChange,
+  onSelectIndex,
+  onToggleSelected,
+  onConfirm,
+  onListKeyDown,
+}: FilePickerDialogProps) => {
+  const searchRef = useRef<TextareaRenderable | null>(null);
+
+  const panelWidth = Math.min(88, Math.max(48, viewportWidth - 8));
+  const panelHeight = Math.min(28, Math.max(14, viewportHeight - 4));
+  const left = Math.max(2, Math.floor((viewportWidth - panelWidth) / 2));
+  const top = Math.max(1, Math.floor((viewportHeight - panelHeight) / 2));
+
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+
+    const searchInput = searchRef.current;
+    if (!searchInput) {
+      return;
+    }
+
+    searchInput.setText(search);
+    searchInput.cursorOffset = search.length;
+    searchInput.focus();
+  }, [search, visible]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <box
+      position="absolute"
+      top={top}
+      left={left}
+      width={panelWidth}
+      height={panelHeight}
+      zIndex={150}
+    >
+      <box
+        width="100%"
+        height="100%"
+        flexDirection="column"
+        backgroundColor={uiTheme.surface}
+        border={['top', 'bottom', 'left', 'right']}
+        borderColor={uiTheme.divider}
+      >
+        <box justifyContent="space-between" paddingX={2} paddingTop={1} paddingBottom={0}>
+          <text fg={uiTheme.text} attributes={TextAttributes.BOLD}>
+            Select files
+          </text>
+          <text fg={uiTheme.muted}>
+            <strong>space</strong> toggle <strong>enter</strong> attach
+          </text>
+        </box>
+
+        <box paddingX={2} paddingTop={1} paddingBottom={1} flexDirection="column">
+          <text fg={uiTheme.muted}>Search</text>
+          <box backgroundColor={uiTheme.panel} paddingX={1}>
+            <textarea
+              ref={searchRef}
+              width="100%"
+              minHeight={1}
+              maxHeight={1}
+              initialValue={search}
+              textColor={uiTheme.text}
+              focusedTextColor={uiTheme.text}
+              backgroundColor={uiTheme.panel}
+              focusedBackgroundColor={uiTheme.panel}
+              onContentChange={() => onSearchChange(searchRef.current?.plainText ?? '')}
+              onKeyDown={event => {
+                const handled = onListKeyDown(event);
+                if (handled && (event.name === 'enter' || event.name === 'return')) {
+                  onConfirm();
+                }
+              }}
+            />
+          </box>
+        </box>
+
+        <box flexGrow={1} paddingX={1}>
+          <scrollbox
+            height="100%"
+            scrollY
+            stickyScroll
+            stickyStart="top"
+            scrollbarOptions={{ visible: false }}
+            viewportOptions={{ backgroundColor: uiTheme.surface }}
+            contentOptions={{ backgroundColor: uiTheme.surface }}
+          >
+            <box flexDirection="column" backgroundColor={uiTheme.surface}>
+              {loading ? (
+                <box paddingX={1}>
+                  <text fg={uiTheme.muted}>Loading files...</text>
+                </box>
+              ) : options.length === 0 ? (
+                <box paddingX={1}>
+                  <text fg={uiTheme.muted}>No matching file</text>
+                </box>
+              ) : (
+                options.map((option, index) => {
+                  const isSelected = index === selectedIndex;
+                  const isChecked = selectedPaths.has(option.absolutePath);
+                  return (
+                    <box
+                      key={option.absolutePath}
+                      flexDirection="row"
+                      justifyContent="space-between"
+                      paddingX={1}
+                      backgroundColor={isSelected ? selectedBackground : uiTheme.surface}
+                      onMouseOver={() => onSelectIndex(index)}
+                      onMouseUp={() => onToggleSelected()}
+                    >
+                      <text
+                        fg={isSelected ? selectedForeground : uiTheme.text}
+                        attributes={TextAttributes.BOLD}
+                        wrapMode="none"
+                      >
+                        {isChecked ? '[x] ' : '[ ] '}
+                        {option.relativePath}
+                      </text>
+                      <text fg={isSelected ? selectedForeground : uiTheme.muted}>
+                        {formatSize(option.size)}
+                      </text>
+                    </box>
+                  );
+                })
+              )}
+            </box>
+          </scrollbox>
+        </box>
+
+        <box paddingX={2} paddingY={1} justifyContent="space-between">
+          <text fg={uiTheme.muted}>{selectedPaths.size} selected</text>
+          <text fg={uiTheme.muted}>
+            <strong>esc</strong> close
+          </text>
+        </box>
+
+        {error ? (
+          <box paddingX={2} paddingBottom={1}>
+            <text fg="#ff8d8d">{error}</text>
+          </box>
+        ) : null}
+
+        <box
+          position="absolute"
+          top={0}
+          left={0}
+          width={1}
+          height="100%"
+          backgroundColor={uiTheme.accent}
+        />
+      </box>
+    </box>
+  );
+};

package/src/components/footer-hints.tsx

@@ -0,0 +1,75 @@
+import { TextAttributes } from '@opentui/core';
+import { useEffect, useState } from 'react';
+
+import { uiTheme } from '../ui/theme';
+
+type FooterHintsProps = {
+  isThinking: boolean;
+  contextUsagePercent: number | null;
+};
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const SPINNER_INTERVAL_MS = 80;
+
+export const FooterHints = ({ isThinking, contextUsagePercent }: FooterHintsProps) => {
+  const [frameIndex, setFrameIndex] = useState(0);
+  const hintAlignPaddingX =
+    uiTheme.layout.conversationPaddingX +
+    uiTheme.layout.conversationContentPaddingX +
+    uiTheme.layout.promptPaddingX;
+  const contextUsageLabel =
+    typeof contextUsagePercent === 'number' && Number.isFinite(contextUsagePercent)
+      ? `${Math.max(0, Math.round(contextUsagePercent))}%`
+      : '--';
+
+  useEffect(() => {
+    if (!isThinking) {
+      setFrameIndex(0);
+      return;
+    }
+
+    const timer = setInterval(() => {
+      setFrameIndex(current => (current + 1) % SPINNER_FRAMES.length);
+    }, SPINNER_INTERVAL_MS);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [isThinking]);
+
+  return (
+    <box
+      width="100%"
+      justifyContent="space-between"
+      paddingLeft={hintAlignPaddingX}
+      paddingTop={0}
+      paddingRight={hintAlignPaddingX + uiTheme.layout.footerPaddingRight}
+      backgroundColor={uiTheme.bg}
+      flexDirection="row"
+      marginTop={uiTheme.layout.footerMarginTop}
+    >
+      {isThinking ? (
+        <box flexDirection="row" gap={1}>
+          <text fg={uiTheme.accent} attributes={TextAttributes.BOLD}>
+            {SPINNER_FRAMES[frameIndex]}
+          </text>
+          <text fg={uiTheme.text} attributes={TextAttributes.BOLD}>
+            thinking...
+          </text>
+        </box>
+      ) : (
+        <text />
+      )}
+      <box flexDirection="row" gap={2}>
+        {isThinking ? (
+          <text fg={uiTheme.muted} attributes={TextAttributes.BOLD}>
+            <strong>esc</strong> stop
+          </text>
+        ) : null}
+        <text fg={uiTheme.muted} attributes={TextAttributes.BOLD}>
+          <strong>context</strong> {contextUsageLabel}
+        </text>
+      </box>
+    </box>
+  );
+};