Function ToolGrep

web/components/tools/ToolGrep.tsx:85–182

({
  input,
  result,
  isError = false,
  isRunning = false,
  startedAt,
  completedAt,
}: ToolGrepProps)

}

export function ToolGrep({
  input,
  result,
  isError = false,
  isRunning = false,
  startedAt,
  completedAt,
}: ToolGrepProps) {
  const groups = result ? parseGrepOutput(result) : [];
  const totalMatches = groups.reduce((sum, g) => sum + g.matches.length, 0);

  const flags = [
    input["-i"] && "-i",
    input["-n"] !== false && "-n",
    input.glob && `--glob ${input.glob}`,
    input.type && `--type ${input.type}`,
    input.context && `-C ${input.context}`,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <ToolUseBlock
      toolName="grep"
      toolInput={input}
      toolResult={result}
      isError={isError}
      isRunning={isRunning}
      startedAt={startedAt}
      completedAt={completedAt}
    >
      {/* Search header */}
      <div className="flex items-center gap-2 px-3 py-2 bg-surface-850 border-b border-surface-700/50 flex-wrap">
        <code className="font-mono text-xs text-yellow-300">{input.pattern}</code>
        {flags && <span className="text-xs text-surface-500 font-mono">{flags}</span>}
        {input.path && (
          <span className="text-xs text-surface-500">in {input.path}</span>
        )}
        {!isRunning && totalMatches > 0 && (
          <span className="ml-auto text-xs text-surface-500">
            {totalMatches} match{totalMatches !== 1 ? "es" : ""}
          </span>
        )}
      </div>

      {/* Results */}
      {isRunning ? (
        <div className="px-3 py-4 text-surface-500 text-xs animate-pulse">
          Searching…
        </div>
      ) : isError ? (
        <div className="px-3 py-3 text-red-400 text-xs font-mono">{result}</div>
      ) : groups.length === 0 ? (
        <div className="px-3 py-3 text-surface-500 text-xs">No matches found.</div>
      ) : (
        <div className="overflow-auto max-h-[400px]">
          {groups.map((group, gi) => (
            <div key={gi} className="border-b border-surface-700/40 last:border-0">