@renxqoo/renx-code 0.0.3 → 0.0.4

package/src/components/tool-confirm-dialog-content.ts

@@ -0,0 +1,186 @@
+import type { AgentToolConfirmEvent } from '../agent/runtime/types';
+import { getToolHiddenArgumentKeys, getToolDisplayName } from './tool-display-config';
+
+export type ToolConfirmDialogContent = {
+  summary: string;
+  detail?: string;
+  reason?: string;
+  requestedPath?: string;
+  allowedDirectories: string[];
+  argumentItems: Array<{
+    label: string;
+    value: string;
+    multiline?: boolean;
+  }>;
+};
+
+const asRecord = (value: unknown): Record<string, unknown> => {
+  return value && typeof value === 'object' ? (value as Record<string, unknown>) : {};
+};
+
+const readString = (value: unknown): string | undefined => {
+  return typeof value === 'string' && value.trim().length > 0 ? value : undefined;
+};
+
+const readStringArray = (value: unknown): string[] => {
+  return Array.isArray(value)
+    ? value.filter((item): item is string => typeof item === 'string')
+    : [];
+};
+
+const stringifyPretty = (value: unknown): string | undefined => {
+  if (value === undefined) {
+    return undefined;
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+};
+
+const formatPathTarget = (value: unknown, fallback = '.'): string => {
+  return readString(value) ?? fallback;
+};
+
+const parseJsonLike = (value: unknown): unknown => {
+  if (typeof value !== 'string') {
+    return value;
+  }
+
+  const trimmed = value.trim();
+  if (
+    trimmed.length < 2 ||
+    !(
+      (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+      (trimmed.startsWith('[') && trimmed.endsWith(']'))
+    )
+  ) {
+    return value;
+  }
+
+  try {
+    return JSON.parse(trimmed);
+  } catch {
+    return value;
+  }
+};
+
+const humanizeKey = (key: string): string => {
+  return key
+    .split('_')
+    .filter(Boolean)
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+};
+
+const formatArgumentValue = (
+  value: unknown
+): { value: string; multiline?: boolean } | undefined => {
+  const normalized = parseJsonLike(value);
+
+  if (typeof normalized === 'string') {
+    return normalized.trim().length > 0
+      ? {
+          value: normalized,
+          multiline: normalized.includes('\n'),
+        }
+      : undefined;
+  }
+
+  if (typeof normalized === 'number' || typeof normalized === 'boolean') {
+    return { value: String(normalized) };
+  }
+
+  const pretty = stringifyPretty(normalized);
+  if (!pretty) {
+    return undefined;
+  }
+
+  return {
+    value: pretty,
+    multiline: true,
+  };
+};
+
+const buildArgumentItems = (
+  event: AgentToolConfirmEvent
+): ToolConfirmDialogContent['argumentItems'] => {
+  const hiddenKeys = new Set(getToolHiddenArgumentKeys(event.toolName));
+
+  return Object.entries(asRecord(event.args)).flatMap(([key, value]) => {
+    if (hiddenKeys.has(key)) {
+      return [];
+    }
+
+    const formatted = formatArgumentValue(value);
+    if (!formatted) {
+      return [];
+    }
+
+    return [
+      {
+        label: humanizeKey(key),
+        value: formatted.value,
+        multiline: formatted.multiline,
+      },
+    ];
+  });
+};
+
+const buildSummary = (event: AgentToolConfirmEvent): { summary: string; detail?: string } => {
+  const args = asRecord(event.args);
+
+  switch (event.toolName) {
+    case 'bash': {
+      const command = readString(args.command) ?? '(empty command)';
+      const description = readString(args.description);
+      return {
+        summary: description ? `Run bash: ${description}` : 'Run bash command',
+        detail: `$ ${command}`,
+      };
+    }
+    case 'file_read':
+      return { summary: `Read ${formatPathTarget(args.path)}` };
+    case 'file_edit':
+      return { summary: `Edit ${formatPathTarget(args.path)}` };
+    case 'write_file':
+      return { summary: `Write ${formatPathTarget(args.path)}` };
+    case 'glob':
+      return {
+        summary: `Glob ${readString(args.pattern) ?? '*'}`,
+        detail: `Path: ${formatPathTarget(args.path)}`,
+      };
+    case 'grep':
+      return {
+        summary: `Grep ${readString(args.pattern) ?? ''}`,
+        detail: `Path: ${formatPathTarget(args.path)}`,
+      };
+    case 'task':
+    case 'agent': {
+      const displayName = getToolDisplayName(event.toolName).replace(/\s+run$/i, '');
+      return {
+        summary: `Run ${displayName} ${(readString(args.subagent_type) ?? 'agent').trim()}`,
+        detail: readString(args.description),
+      };
+    }
+    default:
+      return { summary: `Call ${event.toolName}` };
+  }
+};
+
+export const buildToolConfirmDialogContent = (
+  event: AgentToolConfirmEvent
+): ToolConfirmDialogContent => {
+  const metadata = asRecord(event.metadata);
+  const { summary, detail } = buildSummary(event);
+
+  return {
+    summary,
+    detail,
+    reason: readString(event.reason),
+    requestedPath: readString(metadata.requestedPath),
+    allowedDirectories: readStringArray(metadata.allowedDirectories),
+    argumentItems: buildArgumentItems(event),
+  };
+};

package/src/components/tool-confirm-dialog.tsx

@@ -0,0 +1,187 @@
+import { TextAttributes } from '@opentui/core';
+
+import type { AgentToolConfirmEvent } from '../agent/runtime/types';
+import { uiTheme } from '../ui/theme';
+import { buildToolConfirmDialogContent } from './tool-confirm-dialog-content';
+
+type ToolConfirmDialogProps = {
+  visible: boolean;
+  viewportWidth: number;
+  viewportHeight: number;
+  request: (AgentToolConfirmEvent & { selectedAction: 'approve' | 'deny' }) | null;
+};
+
+const selectedForeground = '#050608';
+
+const renderButton = (label: string, selected: boolean) => {
+  return (
+    <box
+      paddingLeft={1}
+      paddingRight={1}
+      backgroundColor={selected ? uiTheme.accent : uiTheme.surface}
+      border={['top', 'bottom', 'left', 'right']}
+      borderColor={selected ? uiTheme.accent : uiTheme.divider}
+    >
+      <text fg={selected ? selectedForeground : uiTheme.text} attributes={TextAttributes.BOLD}>
+        {label}
+      </text>
+    </box>
+  );
+};
+
+export const ToolConfirmDialog = ({
+  visible,
+  viewportWidth,
+  viewportHeight,
+  request,
+}: ToolConfirmDialogProps) => {
+  if (!visible || !request) {
+    return null;
+  }
+
+  const content = buildToolConfirmDialogContent(request);
+  const panelWidth = Math.min(86, Math.max(48, viewportWidth - 8));
+  const panelHeight = Math.min(22, Math.max(14, viewportHeight - 6));
+  const left = Math.max(2, Math.floor((viewportWidth - panelWidth) / 2));
+  const top = Math.max(1, Math.floor((viewportHeight - panelHeight) / 2));
+  const selectedAction = request.selectedAction;
+
+  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
+          gap={1}
+          paddingLeft={2}
+          paddingRight={2}
+          paddingTop={1}
+          paddingBottom={1}
+          flexDirection="column"
+        >
+          <box flexDirection="row" gap={1}>
+            <text fg={uiTheme.accent} attributes={TextAttributes.BOLD}>
+              {'△'}
+            </text>
+            <text fg={uiTheme.text} attributes={TextAttributes.BOLD}>
+              Permission required
+            </text>
+          </box>
+
+          <box paddingLeft={1}>
+            <text fg={uiTheme.text} attributes={TextAttributes.BOLD}>
+              {content.summary}
+            </text>
+          </box>
+
+          {content.detail ? (
+            <box paddingLeft={1}>
+              <text fg={uiTheme.text}>{content.detail}</text>
+            </box>
+          ) : null}
+
+          {content.reason ? (
+            <box paddingLeft={1} flexDirection="column">
+              <text fg={uiTheme.muted}>Reason</text>
+              <text fg={uiTheme.text} wrapMode="word">
+                {content.reason}
+              </text>
+            </box>
+          ) : null}
+
+          {content.requestedPath ? (
+            <box paddingLeft={1} flexDirection="column">
+              <text fg={uiTheme.muted}>Requested path</text>
+              <text fg={uiTheme.text} wrapMode="word">
+                {content.requestedPath}
+              </text>
+            </box>
+          ) : null}
+
+          {content.allowedDirectories.length > 0 ? (
+            <box paddingLeft={1} flexDirection="column">
+              <text fg={uiTheme.muted}>Allowed directories</text>
+              {content.allowedDirectories.map(directory => (
+                <text key={directory} fg={uiTheme.text} wrapMode="word">
+                  {directory}
+                </text>
+              ))}
+            </box>
+          ) : null}
+
+          {content.argumentItems.length > 0 ? (
+            <box flexGrow={1} paddingLeft={1} paddingRight={1}>
+              <scrollbox
+                height="100%"
+                scrollY
+                stickyScroll
+                scrollbarOptions={{ visible: false }}
+                viewportOptions={{ backgroundColor: uiTheme.panel }}
+                contentOptions={{ backgroundColor: uiTheme.panel }}
+              >
+                <box
+                  backgroundColor={uiTheme.panel}
+                  paddingX={1}
+                  paddingY={1}
+                  gap={1}
+                  flexDirection="column"
+                >
+                  <text fg={uiTheme.muted}>Arguments</text>
+                  {content.argumentItems.map((item, index) => (
+                    <box key={`${item.label}:${index}`} flexDirection="column">
+                      <text fg={uiTheme.muted}>{item.label}</text>
+                      <text
+                        fg={uiTheme.text}
+                        wrapMode={item.multiline ? 'char' : 'word'}
+                        attributes={item.multiline ? uiTheme.typography.code : undefined}
+                      >
+                        {item.value}
+                      </text>
+                    </box>
+                  ))}
+                </box>
+              </scrollbox>
+            </box>
+          ) : null}
+        </box>
+
+        <box
+          flexDirection="row"
+          justifyContent="space-between"
+          paddingLeft={2}
+          paddingRight={2}
+          paddingTop={1}
+          paddingBottom={1}
+          backgroundColor={uiTheme.panel}
+        >
+          <box flexDirection="row" gap={1}>
+            {renderButton('Allow once', selectedAction === 'approve')}
+            {renderButton('Reject', selectedAction === 'deny')}
+          </box>
+          <text fg={uiTheme.muted}>left/right select enter confirm esc reject</text>
+        </box>
+
+        <box
+          position="absolute"
+          top={0}
+          left={0}
+          width={1}
+          height="100%"
+          backgroundColor={uiTheme.accent}
+        />
+      </box>
+    </box>
+  );
+};

package/src/components/tool-display-config.ts

@@ -0,0 +1,119 @@
+export type ToolDisplayConfig = {
+  aliases?: string[];
+  displayName?: string;
+  icon?: string;
+  hiddenArgumentKeys?: string[];
+};
+
+const TOOL_DISPLAY_CONFIG: Record<string, ToolDisplayConfig> = {
+  agent: {
+    aliases: ['task'],
+    displayName: 'task run',
+    icon: '◉',
+    hiddenArgumentKeys: ['subagent_type', 'description'],
+  },
+  task: {
+    displayName: 'task run',
+    icon: '◉',
+    hiddenArgumentKeys: ['subagent_type', 'description'],
+  },
+  bash: {
+    icon: '$',
+    hiddenArgumentKeys: ['command', 'description'],
+  },
+  file_read: {
+    icon: '→',
+    hiddenArgumentKeys: ['path'],
+  },
+  file_edit: {
+    icon: '←',
+    hiddenArgumentKeys: ['path'],
+  },
+  write_file: {
+    icon: '←',
+    hiddenArgumentKeys: ['path'],
+  },
+  glob: {
+    icon: '✱',
+    hiddenArgumentKeys: ['pattern', 'path'],
+  },
+  grep: {
+    icon: '✱',
+    hiddenArgumentKeys: ['pattern', 'path'],
+  },
+  webfetch: {
+    icon: '%',
+  },
+};
+
+const TOOL_NAME_PREFIX_DISPLAY: Array<{ prefix: string; displayPrefix: string; icon?: string }> = [
+  {
+    prefix: 'task_',
+    displayPrefix: 'task ',
+    icon: '◉',
+  },
+];
+
+export function getToolDisplayConfig(toolName: string): ToolDisplayConfig {
+  return TOOL_DISPLAY_CONFIG[toolName] ?? {};
+}
+
+export function getToolDisplayName(toolName: string): string {
+  const direct = getToolDisplayConfig(toolName).displayName;
+  if (direct) {
+    return direct;
+  }
+
+  for (const entry of TOOL_NAME_PREFIX_DISPLAY) {
+    if (toolName.startsWith(entry.prefix)) {
+      return toolName.replace(entry.prefix, entry.displayPrefix).replace(/_/g, ' ');
+    }
+  }
+
+  const aliased = Object.entries(TOOL_DISPLAY_CONFIG).find(([, config]) =>
+    (config.aliases ?? []).includes(toolName)
+  );
+  if (aliased?.[1].displayName) {
+    return aliased[1].displayName as string;
+  }
+
+  return toolName;
+}
+
+export function getToolDisplayIcon(toolName: string): string {
+  const direct = getToolDisplayConfig(toolName).icon;
+  if (direct) {
+    return direct;
+  }
+
+  for (const entry of TOOL_NAME_PREFIX_DISPLAY) {
+    if (toolName.startsWith(entry.prefix) && entry.icon) {
+      return entry.icon;
+    }
+  }
+
+  const aliased = Object.entries(TOOL_DISPLAY_CONFIG).find(([, config]) =>
+    (config.aliases ?? []).includes(toolName)
+  );
+  if (aliased?.[1].icon) {
+    return aliased[1].icon as string;
+  }
+
+  return '⚙';
+}
+
+export function getToolHiddenArgumentKeys(toolName: string): string[] {
+  const direct = getToolDisplayConfig(toolName).hiddenArgumentKeys;
+  if (direct) {
+    return [...direct];
+  }
+
+  const aliased = Object.entries(TOOL_DISPLAY_CONFIG).find(([, config]) =>
+    (config.aliases ?? []).includes(toolName)
+  );
+  if (aliased?.[1].hiddenArgumentKeys) {
+    return [...(aliased[1].hiddenArgumentKeys as string[])];
+  }
+
+  return [];
+}

package/src/context-usage-regressions.test.ts

@@ -0,0 +1,26 @@
+import { readFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+import { describe, expect, it } from 'vitest';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const readSource = async (path: string) => {
+  return readFile(path, 'utf8');
+};
+
+describe('context usage regressions', () => {
+  it('does not clear context usage at the start of a new request', async () => {
+    const source = await readSource(join(__dirname, 'hooks/use-agent-chat.ts'));
+
+    expect(source).not.toContain('setContextUsagePercent(null);');
+  });
+
+  it('does not render missing context usage as 0%', async () => {
+    const source = await readSource(join(__dirname, 'components/footer-hints.tsx'));
+
+    expect(source).not.toContain(": '0%'");
+  });
+});

package/src/files/attachment-capabilities.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'bun:test';
+
+import {
+  DEFAULT_ATTACHMENT_MODEL_CAPABILITIES,
+  resolveAttachmentModelCapabilities,
+} from './attachment-capabilities';
+
+describe('attachment-capabilities', () => {
+  it('defaults all modalities to false when model config omits them', () => {
+    expect(resolveAttachmentModelCapabilities(undefined)).toEqual(
+      DEFAULT_ATTACHMENT_MODEL_CAPABILITIES
+    );
+  });
+
+  it('maps explicit modality flags from model config', () => {
+    expect(
+      resolveAttachmentModelCapabilities({
+        modalities: {
+          image: true,
+          audio: false,
+          video: true,
+        },
+      })
+    ).toEqual({
+      image: true,
+      audio: false,
+      video: true,
+    });
+  });
+});

package/src/files/attachment-capabilities.ts

@@ -0,0 +1,50 @@
+import type { PromptFileSelection } from './types';
+
+export type AttachmentModelCapabilities = {
+  image: boolean;
+  audio: boolean;
+  video: boolean;
+};
+
+export const DEFAULT_ATTACHMENT_MODEL_CAPABILITIES: AttachmentModelCapabilities = {
+  image: false,
+  audio: false,
+  video: false,
+};
+
+const normalizeFlag = (value: boolean | undefined): boolean => value === true;
+
+export const resolveAttachmentModelCapabilities = (
+  modelConfig:
+    | {
+        modalities?: {
+          image?: boolean;
+          audio?: boolean;
+          video?: boolean;
+        };
+      }
+    | null
+    | undefined
+): AttachmentModelCapabilities => {
+  return {
+    image: normalizeFlag(modelConfig?.modalities?.image),
+    audio: normalizeFlag(modelConfig?.modalities?.audio),
+    video: normalizeFlag(modelConfig?.modalities?.video),
+  };
+};
+
+export const isImageSelection = (file: PromptFileSelection): boolean => {
+  return /\.(gif|jpe?g|png|webp)$/i.test(file.relativePath);
+};
+
+export const isAudioSelection = (file: PromptFileSelection): boolean => {
+  return /\.(mp3|wav|m4a|aac|ogg|flac)$/i.test(file.relativePath);
+};
+
+export const isVideoSelection = (file: PromptFileSelection): boolean => {
+  return /\.(mp4|mov|webm|m4v|avi|mkv)$/i.test(file.relativePath);
+};
+
+export const isMediaSelection = (file: PromptFileSelection): boolean => {
+  return isImageSelection(file) || isAudioSelection(file) || isVideoSelection(file);
+};