Grok Tool

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4/**
5 * GrokTool — a Grok action line.
6 *
7 * Two captured forms:
8 *   1. Compact: `read app/page.tsx` (dim verb, blue path)
9 *   2. Card:    `┃  ◆ Run Write …  [hooks: 3]` (left gutter + diamond)
10 */
11const GREEN = "#00ff00"; // 38;5;10 — active Run tool cards
12const MUTED = "#8b8b90";
13const DIM = "#6c6c6c";
14const BLUE = "#8db0ff";
15const SILVER = "#c0c0c0";
16 
17export function GrokTool({
18  verb,
19  path,
20  meta,
21  variant = "line",
22  title,
23  hooks,
24  className,
25  children,
26}: {
27  verb?: string;
28  path?: string;
29  meta?: string;
30  variant?: "line" | "card";
31  /** Card title, e.g. "Run Write permission probe output file". */
32  title?: string;
33  hooks?: number;
34  className?: string;
35  children?: React.ReactNode;
36}) {
37  if (variant === "card") {
38    const heading = title ?? [verb, path].filter(Boolean).join(" ");
39    return (
40      <div
41        className={cn(
42          "min-w-0 border-l-2 pl-3 font-mono text-[13px] leading-[1.55]",
43          className,
44        )}
45        style={{ borderColor: GREEN }}
46      >
47        <div className="flex min-w-0 flex-wrap items-baseline gap-x-2">
48          <span aria-hidden className="shrink-0" style={{ color: GREEN }}>
49            ◆
50          </span>
51          <span className="min-w-0 break-words font-semibold" style={{ color: SILVER }}>
52            {heading}
53          </span>
54          {hooks != null ? (
55            <span className="shrink-0" style={{ color: DIM }}>
56              [hooks: <span style={{ color: GREEN }}>{hooks}</span>]
57            </span>
58          ) : null}
59        </div>
60        {children ? (
61          <div className="mt-1 min-w-0 break-words" style={{ color: MUTED }}>
62            {children}
63          </div>
64        ) : null}
65      </div>
66    );
67  }
68 
69  return (
70    <div
71      className={cn(
72        "flex min-w-0 flex-wrap items-baseline gap-2 font-mono text-[13px] leading-[1.6] text-[#8b8b90]",
73        className,
74      )}
75    >
76      {verb ? <span className="shrink-0">{verb}</span> : null}
77      {path ? (
78        <span className="min-w-0 break-all" style={{ color: BLUE }}>
79          {path}
80        </span>
81      ) : null}
82      {meta ? <span className="text-[#6a6a6a]">{meta}</span> : null}
83      {children}
84    </div>
85  );
86}