@assistkick/create 1.13.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistkick/create",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "description": "Scaffold assistkick-product-system into any project",
   "type": "module",
   "bin": {

package/templates/assistkick-product-system/packages/frontend/src/components/ToolDetailView.tsx

@@ -0,0 +1,273 @@
+/**
+ * ToolDetailView — humanized views for Agent, Read, and Bash tool calls.
+ * Renders both input and result in a formatted layout, replacing the raw
+ * JSON + plain text display with structured, readable panels.
+ */
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import ReactMarkdown from 'react-markdown';
+import type { Components } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import type { ToolResultBlock } from '../hooks/use_chat_stream';
+
+/** Map common file extensions to Prism language identifiers. */
+const extToLang: Record<string, string> = {
+  ts: 'typescript', tsx: 'tsx', js: 'javascript', jsx: 'jsx',
+  py: 'python', rb: 'ruby', rs: 'rust', go: 'go',
+  java: 'java', kt: 'kotlin', cs: 'csharp', cpp: 'cpp', c: 'c',
+  css: 'css', scss: 'scss', html: 'html', vue: 'html',
+  json: 'json', yaml: 'yaml', yml: 'yaml', toml: 'toml',
+  md: 'markdown', sql: 'sql', sh: 'bash', bash: 'bash', zsh: 'bash',
+  xml: 'xml', svg: 'xml', graphql: 'graphql', prisma: 'prisma',
+  dockerfile: 'docker',
+};
+
+const inferLang = (filePath: string): string => {
+  const name = filePath.split('/').pop() ?? '';
+  if (name.toLowerCase() === 'dockerfile') return 'docker';
+  const ext = name.split('.').pop()?.toLowerCase() ?? '';
+  return extToLang[ext] ?? 'text';
+};
+
+const codeStyle: React.CSSProperties = {
+  margin: 0,
+  padding: '0.75rem',
+  fontSize: '12px',
+  lineHeight: '1.5',
+  background: 'transparent',
+  borderRadius: 0,
+};
+
+/** Normalize result content to a string. */
+const contentToString = (content: ToolResultBlock['content']): string => {
+  if (!content) return '';
+  if (typeof content === 'string') return content;
+  if (Array.isArray(content)) {
+    return (content as Array<Record<string, unknown>>)
+      .filter(c => typeof c.text === 'string')
+      .map(c => c.text as string)
+      .join('\n');
+  }
+  return String(content);
+};
+
+/** Strip line number prefixes from Read tool output (e.g. "     1→" format). */
+const stripLineNumbers = (text: string): { code: string; startLine: number } => {
+  const lines = text.split('\n');
+  let startLine = 1;
+  let foundLineNum = false;
+
+  const stripped = lines.map((line, i) => {
+    const match = line.match(/^\s*(\d+)[→\t]/);
+    if (match) {
+      if (i === 0) {
+        startLine = parseInt(match[1], 10);
+        foundLineNum = true;
+      }
+      return line.replace(/^\s*\d+[→\t]/, '');
+    }
+    return line;
+  });
+
+  return {
+    code: foundLineNum ? stripped.join('\n') : text,
+    startLine: foundLineNum ? startLine : 1,
+  };
+};
+
+/** Markdown components for Agent output — syntax-highlighted fenced code blocks. */
+const mdComponents: Components = {
+  code({ className, children, ...props }) {
+    const match = /language-(\w+)/.exec(className || '');
+    const codeString = String(children).replace(/\n$/, '');
+
+    if (match) {
+      return (
+        <SyntaxHighlighter
+          style={oneDark}
+          language={match[1]}
+          PreTag="div"
+          customStyle={{ margin: 0, borderRadius: 6, fontSize: 12 }}
+        >
+          {codeString}
+        </SyntaxHighlighter>
+      );
+    }
+
+    return (
+      <code className={className} {...props}>
+        {children}
+      </code>
+    );
+  },
+};
+
+/** Tailwind classes for markdown rendering inside tool detail panels. */
+const mdClass = [
+  'text-[12px] font-mono text-content-secondary break-words min-w-0',
+  '[&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
+  '[&_h1]:text-[14px] [&_h1]:font-bold [&_h1]:mt-3 [&_h1]:mb-1 [&_h1]:text-content-primary',
+  '[&_h2]:text-[13px] [&_h2]:font-bold [&_h2]:mt-2.5 [&_h2]:mb-1 [&_h2]:text-content-primary',
+  '[&_h3]:text-[12px] [&_h3]:font-semibold [&_h3]:mt-2 [&_h3]:mb-0.5 [&_h3]:text-content-primary',
+  '[&_p]:my-1 [&_p]:leading-[1.5]',
+  '[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-4 [&_ol]:pl-4 [&_ul]:my-1 [&_ol]:my-1',
+  '[&_li]:my-[2px] [&_li]:leading-normal',
+  '[&_blockquote]:border-l-2 [&_blockquote]:border-edge [&_blockquote]:pl-2 [&_blockquote]:my-1.5 [&_blockquote]:text-content-muted',
+  '[&_pre]:bg-surface-raised [&_pre]:py-2 [&_pre]:px-2.5 [&_pre]:rounded-md [&_pre]:overflow-x-auto [&_pre]:my-1.5 [&_pre]:text-xs',
+  '[&_pre_code]:bg-transparent [&_pre_code]:p-0',
+  '[&_code]:bg-surface-raised [&_code]:px-1 [&_code]:py-px [&_code]:rounded-[3px] [&_code]:text-xs [&_code]:text-accent',
+  '[&_strong]:font-bold [&_strong]:text-content-primary',
+  '[&_hr]:my-2 [&_hr]:border-edge',
+  '[&_table]:my-1.5 [&_table]:border-collapse [&_table]:block [&_table]:overflow-x-auto',
+  '[&_th]:px-2 [&_th]:py-0.5 [&_th]:border [&_th]:border-edge [&_th]:text-xs [&_th]:font-semibold [&_th]:bg-surface-raised',
+  '[&_td]:px-2 [&_td]:py-0.5 [&_td]:border [&_td]:border-edge [&_td]:text-xs',
+].join(' ');
+
+interface ToolDetailViewProps {
+  toolName: string;
+  input: Record<string, unknown>;
+  result?: ToolResultBlock;
+}
+
+/** Labeled panel wrapper. */
+const Panel = ({ label, labelColor, children }: { label: string; labelColor?: string; children: React.ReactNode }) => (
+  <div className="border rounded-md border-edge bg-surface-alt overflow-hidden">
+    <div className={`text-[10px] font-mono uppercase tracking-wider px-3 py-1.5 border-b border-edge/50 ${labelColor ?? 'text-content-muted'}`}>
+      {label}
+    </div>
+    {children}
+  </div>
+);
+
+/* ── Read ──────────────────────────────────────────── */
+
+const ReadDetailView = ({ input, result }: Omit<ToolDetailViewProps, 'toolName'>) => {
+  const filePath = (input.file_path as string) ?? '';
+  const language = inferLang(filePath);
+  const offset = input.offset as number | undefined;
+  const limit = input.limit as number | undefined;
+  const rawContent = result ? contentToString(result.content) : '';
+  const { code, startLine } = stripLineNumbers(rawContent);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="text-[10px] font-mono text-content-muted truncate px-1">
+        {filePath}
+        {offset != null && <span className="ml-2 opacity-70">from line {offset}</span>}
+        {limit != null && <span className="ml-1 opacity-70">({limit} lines)</span>}
+      </div>
+      {result && (
+        <Panel label={result.isError ? 'Error' : 'Content'} labelColor={result.isError ? 'text-red-400' : undefined}>
+          <div className="overflow-auto max-h-[400px]">
+            {result.isError ? (
+              <pre className="text-[12px] font-mono text-error whitespace-pre-wrap break-words px-3 py-2 m-0">
+                {rawContent || '(empty)'}
+              </pre>
+            ) : (
+              <SyntaxHighlighter
+                language={language}
+                style={oneDark}
+                customStyle={codeStyle}
+                showLineNumbers
+                startingLineNumber={startLine}
+                wrapLongLines
+              >
+                {code || '(empty)'}
+              </SyntaxHighlighter>
+            )}
+          </div>
+        </Panel>
+      )}
+    </div>
+  );
+};
+
+/* ── Bash ──────────────────────────────────────────── */
+
+const BashDetailView = ({ input, result }: Omit<ToolDetailViewProps, 'toolName'>) => {
+  const command = (input.command as string) ?? '';
+  const description = (input.description as string) ?? '';
+  const content = result ? contentToString(result.content) : '';
+
+  return (
+    <div className="flex flex-col gap-2">
+      {description && (
+        <div className="text-[10px] font-mono text-content-muted px-1">{description}</div>
+      )}
+      <Panel label="Command">
+        <div className="overflow-auto max-h-[200px]">
+          <SyntaxHighlighter language="bash" style={oneDark} customStyle={codeStyle} wrapLongLines>
+            {command}
+          </SyntaxHighlighter>
+        </div>
+      </Panel>
+      {result && (
+        <Panel label={result.isError ? 'Error' : 'Output'} labelColor={result.isError ? 'text-red-400' : undefined}>
+          <pre
+            className={`text-[12px] font-mono whitespace-pre-wrap break-words px-3 py-2 m-0 max-h-[400px] overflow-y-auto ${
+              result.isError ? 'text-error' : 'text-content-secondary'
+            }`}
+          >
+            {content || '(empty)'}
+          </pre>
+        </Panel>
+      )}
+    </div>
+  );
+};
+
+/* ── Agent ─────────────────────────────────────────── */
+
+const AgentDetailView = ({ input, result }: Omit<ToolDetailViewProps, 'toolName'>) => {
+  const description = (input.description as string) ?? '';
+  const subagentType = (input.subagent_type as string) ?? 'general-purpose';
+  const prompt = (input.prompt as string) ?? '';
+  const content = result ? contentToString(result.content) : '';
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2 px-1">
+        <span className="text-[10px] font-mono px-2 py-0.5 rounded-full bg-accent/15 text-accent">
+          {subagentType}
+        </span>
+        {description && (
+          <span className="text-[11px] font-mono text-content-secondary">{description}</span>
+        )}
+      </div>
+      <Panel label="Prompt">
+        <div className="px-3 py-2 text-[12px] font-mono text-content-secondary whitespace-pre-wrap break-words max-h-[300px] overflow-y-auto">
+          {prompt || '(empty)'}
+        </div>
+      </Panel>
+      {result && (
+        <Panel label={result.isError ? 'Error' : 'Response'} labelColor={result.isError ? 'text-red-400' : undefined}>
+          <div className="px-3 py-2 max-h-[400px] overflow-y-auto">
+            {result.isError ? (
+              <pre className="text-[12px] font-mono text-error whitespace-pre-wrap break-words m-0">
+                {content || '(empty)'}
+              </pre>
+            ) : (
+              <div className={mdClass}>
+                <ReactMarkdown remarkPlugins={[remarkGfm]} components={mdComponents}>
+                  {content || '(empty)'}
+                </ReactMarkdown>
+              </div>
+            )}
+          </div>
+        </Panel>
+      )}
+    </div>
+  );
+};
+
+/* ── Router ────────────────────────────────────────── */
+
+export const ToolDetailView = ({ toolName, input, result }: ToolDetailViewProps) => {
+  switch (toolName) {
+    case 'Read': return <ReadDetailView input={input} result={result} />;
+    case 'Bash': return <BashDetailView input={input} result={result} />;
+    case 'Agent': return <AgentDetailView input={input} result={result} />;
+    default: return null;
+  }
+};

package/templates/assistkick-product-system/packages/frontend/src/components/ToolUseCard.tsx

@@ -11,6 +11,7 @@ import { useState } from 'react';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { summarizeToolUse, toolIcon } from '../lib/tool_use_summary';
 import { ToolDiffView } from './ToolDiffView';
+import { ToolDetailView } from './ToolDetailView';
 import type { ToolResultBlock } from '../hooks/use_chat_stream';
 
 interface ToolUseCardProps {
@@ -52,7 +53,12 @@ const contentToString = (content: ToolResultBlock['content']): string => {
 
 type ViewTab = 'humanized' | 'raw';
 
-const hasHumanizedView = (name: string): boolean => name === 'Edit' || name === 'Write';
+const hasHumanizedView = (name: string): boolean =>
+  name === 'Edit' || name === 'Write' || name === 'Read' || name === 'Bash' || name === 'Agent';
+
+/** Tools where the humanized view renders both input and result together. */
+const hasIntegratedView = (name: string): boolean =>
+  name === 'Read' || name === 'Bash' || name === 'Agent';
 
 export const ToolUseCard = ({ name, input, isStreaming, result }: ToolUseCardProps) => {
   const [expanded, setExpanded] = useState(false);
@@ -114,7 +120,11 @@ export const ToolUseCard = ({ name, input, isStreaming, result }: ToolUseCardPro
           {/* Tool input — humanized or raw */}
           {hasHumanizedView(name) && viewTab === 'humanized' ? (
             <div className="px-3 py-2">
-              <ToolDiffView toolName={name as 'Edit' | 'Write'} input={input} />
+              {hasIntegratedView(name) ? (
+                <ToolDetailView toolName={name} input={input} result={result} />
+              ) : (
+                <ToolDiffView toolName={name as 'Edit' | 'Write'} input={input} />
+              )}
             </div>
           ) : (
             <div className="px-3 py-2">
@@ -127,8 +137,8 @@ export const ToolUseCard = ({ name, input, isStreaming, result }: ToolUseCardPro
             </div>
           )}
 
-          {/* Tool output — shown inline when result is available */}
-          {result && (
+          {/* Tool output — shown inline when result is available (skip for integrated views in humanized mode) */}
+          {result && !(hasIntegratedView(name) && viewTab === 'humanized') && (
             <div className="border-t border-edge px-3 py-2">
               <div className="text-[10px] font-mono text-content-muted uppercase tracking-wider mb-1">
                 {result.isError ? 'Error' : 'Output'}