@assistkick/create 1.23.0 → 1.24.0

package/package.json

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

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

@@ -261,6 +261,124 @@ const AgentDetailView = ({ input, result }: Omit<ToolDetailViewProps, 'toolName'
   );
 };
 
+/* ── Generic (MCP & other tools) ──────────────────── */
+
+/** Format an MCP-style tool name for display: mcp__jetbrains__list_directory_tree → jetbrains / list_directory_tree */
+const formatToolName = (name: string): { provider: string | null; action: string } => {
+  if (name.startsWith('mcp__')) {
+    const parts = name.slice(5).split('__');
+    if (parts.length >= 2) {
+      return { provider: parts[0], action: parts.slice(1).join(' / ') };
+    }
+    return { provider: null, action: parts[0] };
+  }
+  return { provider: null, action: name };
+};
+
+/** Try to pretty-print a value — if JSON, format it; otherwise return as string. */
+const tryFormatValue = (value: unknown): { text: string; isJson: boolean } => {
+  if (value == null) return { text: '', isJson: false };
+  if (typeof value === 'string') {
+    // Try parsing as JSON
+    try {
+      const parsed = JSON.parse(value);
+      if (typeof parsed === 'object' && parsed !== null) {
+        return { text: JSON.stringify(parsed, null, 2), isJson: true };
+      }
+    } catch {
+      // Not JSON — return as plain text
+    }
+    return { text: value, isJson: false };
+  }
+  if (typeof value === 'object') {
+    return { text: JSON.stringify(value, null, 2), isJson: true };
+  }
+  return { text: String(value), isJson: false };
+};
+
+const GenericDetailView = ({ toolName, input, result }: ToolDetailViewProps) => {
+  const { provider, action } = formatToolName(toolName);
+  const content = result ? contentToString(result.content) : '';
+  const inputEntries = Object.entries(input);
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Tool name badge */}
+      <div className="flex items-center gap-2 px-1">
+        {provider && (
+          <span className="text-[10px] font-mono px-2 py-0.5 rounded-full bg-accent/15 text-accent">
+            {provider}
+          </span>
+        )}
+        <span className="text-[11px] font-mono text-content-secondary">{action}</span>
+      </div>
+
+      {/* Input parameters */}
+      {inputEntries.length > 0 && (
+        <Panel label="Input">
+          <div className="px-3 py-2 flex flex-col gap-1.5">
+            {inputEntries.map(([key, value]) => {
+              const { text, isJson } = tryFormatValue(value);
+              const isLong = text.length > 120;
+              return (
+                <div key={key} className="flex flex-col gap-0.5">
+                  <span className="text-[10px] font-mono text-content-muted uppercase tracking-wider">{key}</span>
+                  {isJson ? (
+                    <pre className="text-[12px] font-mono text-content-secondary whitespace-pre-wrap break-words m-0 max-h-[200px] overflow-y-auto bg-surface-raised/50 rounded px-2 py-1">
+                      {text}
+                    </pre>
+                  ) : isLong ? (
+                    <pre className="text-[12px] font-mono text-content-secondary whitespace-pre-wrap break-words m-0 max-h-[200px] overflow-y-auto">
+                      {text}
+                    </pre>
+                  ) : (
+                    <span className="text-[12px] font-mono text-content-secondary">{text || '(empty)'}</span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </Panel>
+      )}
+
+      {/* Output */}
+      {result && (
+        <Panel label={result.isError ? 'Error' : 'Output'} labelColor={result.isError ? 'text-red-400' : undefined}>
+          <div className="max-h-[400px] overflow-y-auto">
+            {(() => {
+              const { text: formatted, isJson } = tryFormatValue(content);
+              if (result.isError) {
+                return (
+                  <pre className="text-[12px] font-mono text-error whitespace-pre-wrap break-words px-3 py-2 m-0">
+                    {content || '(empty)'}
+                  </pre>
+                );
+              }
+              if (isJson) {
+                return (
+                  <SyntaxHighlighter
+                    language="json"
+                    style={oneDark}
+                    customStyle={codeStyle}
+                    wrapLongLines
+                  >
+                    {formatted}
+                  </SyntaxHighlighter>
+                );
+              }
+              return (
+                <pre className="text-[12px] font-mono text-content-secondary whitespace-pre-wrap break-words px-3 py-2 m-0">
+                  {content || '(empty)'}
+                </pre>
+              );
+            })()}
+          </div>
+        </Panel>
+      )}
+    </div>
+  );
+};
+
 /* ── Router ────────────────────────────────────────── */
 
 export const ToolDetailView = ({ toolName, input, result }: ToolDetailViewProps) => {
@@ -268,6 +386,6 @@ export const ToolDetailView = ({ toolName, input, result }: ToolDetailViewProps)
     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;
+    default: return <GenericDetailView toolName={toolName} input={input} result={result} />;
   }
 };

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

@@ -53,12 +53,16 @@ const contentToString = (content: ToolResultBlock['content']): string => {
 
 type ViewTab = 'humanized' | 'raw';
 
-const hasHumanizedView = (name: string): boolean =>
-  name === 'Edit' || name === 'Write' || name === 'Read' || name === 'Bash' || name === 'Agent';
+/** All tools now support humanized + raw tabs. */
+const hasHumanizedView = (_name: string): boolean => true;
 
 /** Tools where the humanized view renders both input and result together. */
 const hasIntegratedView = (name: string): boolean =>
-  name === 'Read' || name === 'Bash' || name === 'Agent';
+  name === 'Read' || name === 'Bash' || name === 'Agent' || hasGenericView(name);
+
+/** Tools that use the generic humanized view (MCP tools and other non-built-in tools). */
+const hasGenericView = (name: string): boolean =>
+  !['Edit', 'Write', 'Read', 'Bash', 'Agent'].includes(name);
 
 export const ToolUseCard = ({ name, input, isStreaming, result }: ToolUseCardProps) => {
   const [expanded, setExpanded] = useState(false);
@@ -120,10 +124,10 @@ export const ToolUseCard = ({ name, input, isStreaming, result }: ToolUseCardPro
           {/* Tool input — humanized or raw */}
           {hasHumanizedView(name) && viewTab === 'humanized' ? (
             <div className="px-3 py-2">
-              {hasIntegratedView(name) ? (
-                <ToolDetailView toolName={name} input={input} result={result} />
-              ) : (
+              {name === 'Edit' || name === 'Write' ? (
                 <ToolDiffView toolName={name as 'Edit' | 'Write'} input={input} />
+              ) : (
+                <ToolDetailView toolName={name} input={input} result={result} />
               )}
             </div>
           ) : (

package/templates/assistkick-product-system/packages/frontend/src/lib/tool_use_summary.ts

@@ -76,8 +76,18 @@ export const summarizeToolUse = (
       return url ? truncate(`Fetch: ${url}`, MAX_SUMMARY_LEN) : 'Web fetch';
     }
 
-    default:
+    default: {
+      // MCP tools: mcp__provider__action → "provider: action"
+      if (name.startsWith('mcp__')) {
+        const parts = name.slice(5).split('__');
+        if (parts.length >= 2) {
+          const provider = parts[0];
+          const action = parts.slice(1).join(' ');
+          return truncate(`${provider}: ${action}`, MAX_SUMMARY_LEN);
+        }
+      }
       return name;
+    }
   }
 };