@assistkick/create 1.22.0 → 1.24.0

package/package.json

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

package/templates/assistkick-product-system/packages/backend/src/services/chat_cli_bridge.ts

@@ -33,8 +33,8 @@ export interface SpawnOptions {
   allowedTools?: string[];
   /** Compacted conversation context to prepend to the system prompt */
   continuationContext?: string;
-  /** Inline MCP config JSON string to pass via --mcp-config */
-  mcpConfigJson?: string;
+  /** Path to a temporary MCP config JSON file to pass via --mcp-config */
+  mcpConfigPath?: string;
   onEvent: (event: Record<string, unknown>) => void;
 }
 
@@ -92,9 +92,9 @@ export class ChatCliBridge {
       }
     }
 
-    // MCP server configuration (inline JSON string)
-    if (options.mcpConfigJson) {
-      args.push('--mcp-config', options.mcpConfigJson);
+    // MCP server configuration (temp file path)
+    if (options.mcpConfigPath) {
+      args.push('--mcp-config', options.mcpConfigPath);
     }
 
     // Prompt via stdin

package/templates/assistkick-product-system/packages/backend/src/services/chat_ws_handler.ts

@@ -30,6 +30,9 @@ import type { ChatMessageRepository } from './chat_message_repository.js';
 import type { ChatSessionService } from './chat_session_service.js';
 import type { TitleGeneratorService } from './title_generator_service.js';
 import type { McpConfigService } from './mcp_config_service.js';
+import { writeFileSync, unlinkSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
 
 export interface ChatWsHandlerDeps {
   wss: WebSocketServer;
@@ -425,15 +428,18 @@ export class ChatWsHandler {
       }
     }
 
-    // Build inline MCP config JSON for this spawn (if user has MCP servers configured)
-    let mcpConfigJson: string | undefined;
+    // Build MCP config temp file for this spawn (if user has MCP servers configured)
+    let mcpConfigPath: string | undefined;
+    let mcpConfigContent: string | undefined;
     const userId = this.wsUserIds.get(ws);
     if (userId && this.mcpConfigService) {
       try {
         const mergedServers = await this.mcpConfigService.buildMergedConfig(userId, projectId);
         if (mergedServers) {
-          mcpConfigJson = JSON.stringify({ mcpServers: mergedServers });
-          this.log('CHAT_WS', `MCP config: ${Object.keys(mergedServers).length} server(s) for user ${userId}`);
+          mcpConfigContent = JSON.stringify({ mcpServers: mergedServers }, null, 2);
+          mcpConfigPath = join(tmpdir(), `mcp-${claudeSessionId}.json`);
+          writeFileSync(mcpConfigPath, mcpConfigContent, 'utf-8');
+          this.log('CHAT_WS', `MCP config for user ${userId}: ${mcpConfigContent}`);
         }
       } catch (err: any) {
         this.log('CHAT_WS', `Failed to build MCP config: ${err.message}`);
@@ -449,7 +455,7 @@ export class ChatWsHandler {
         permissionMode,
         allowedTools: msg.allowedTools,
         continuationContext,
-        mcpConfigJson,
+        mcpConfigPath,
         onEvent: (event) => {
           // Forward to current WS (may have been re-attached after disconnect)
           const currentWs = this.sessionToWs.get(claudeSessionId);
@@ -542,6 +548,11 @@ export class ChatWsHandler {
 
       completion
         .then((result) => {
+          // Clean up MCP config temp file
+          if (mcpConfigPath) {
+            try { unlinkSync(mcpConfigPath); } catch { /* already deleted */ }
+          }
+
           // Look up the current WS — may differ from the original if client reconnected
           const currentWs = this.sessionToWs.get(claudeSessionId);
           if (currentWs) {
@@ -581,6 +592,7 @@ export class ChatWsHandler {
               const parts: string[] = [];
               if (result.stderr) parts.push(result.stderr);
               if (result.stdoutNonJsonLines) parts.push(result.stdoutNonJsonLines);
+              if (mcpConfigContent) parts.push(`MCP config passed: ${mcpConfigContent}`);
               errorDetail = parts.length > 0
                 ? parts.join('\n')
                 : `CLI exited with code ${result.exitCode}`;

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;
+    }
   }
 };