claude-world-studio 1.0.0

package/client/components/ToolUseBlock.tsx

@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+
+interface ToolUseBlockProps {
+  toolName: string;
+  toolInput: Record<string, unknown>;
+  toolId: string;
+  onPreviewFile?: (absolutePath: string) => void;
+}
+
+// Color mapping for MCP server tools
+function getToolColor(name: string): string {
+  if (name.startsWith("mcp__trend-pulse") || name.startsWith("mcp__trend_pulse")) {
+    return "border-emerald-300 bg-emerald-50";
+  }
+  if (name.startsWith("mcp__cf-browser") || name.startsWith("mcp__cf_browser")) {
+    return "border-blue-300 bg-blue-50";
+  }
+  if (name.startsWith("mcp__notebooklm")) {
+    return "border-purple-300 bg-purple-50";
+  }
+  return "border-gray-200 bg-gray-50";
+}
+
+function getToolBadge(name: string): { label: string; color: string } | null {
+  if (name.startsWith("mcp__trend-pulse") || name.startsWith("mcp__trend_pulse")) {
+    return { label: "trend-pulse", color: "bg-emerald-100 text-emerald-700" };
+  }
+  if (name.startsWith("mcp__cf-browser") || name.startsWith("mcp__cf_browser")) {
+    return { label: "cf-browser", color: "bg-blue-100 text-blue-700" };
+  }
+  if (name.startsWith("mcp__notebooklm")) {
+    return { label: "notebooklm", color: "bg-purple-100 text-purple-700" };
+  }
+  return null;
+}
+
+function getToolDisplayName(name: string): string {
+  return name
+    .replace(/^mcp__(trend[-_]pulse|cf[-_]browser|notebooklm)__/, "")
+    .replace(/_/g, " ");
+}
+
+function str(val: unknown): string {
+  return typeof val === "string" ? val : "";
+}
+
+function getToolSummary(name: string, input: Record<string, unknown>): string {
+  switch (name) {
+    case "Read":
+    case "Write":
+    case "Edit":
+      return str(input.file_path);
+    case "Bash": {
+      const cmd = str(input.command);
+      return cmd.length > 80 ? cmd.slice(0, 80) + "..." : cmd;
+    }
+    case "Grep":
+      return `"${str(input.pattern)}" in ${str(input.path) || "."}`;
+    case "Glob":
+      return str(input.pattern);
+    case "WebSearch":
+      return str(input.query);
+    case "WebFetch":
+      return str(input.url);
+  }
+
+  if (input.topic) return str(input.topic);
+  if (input.query) return str(input.query);
+  if (input.url) return str(input.url);
+  if (input.keyword) return str(input.keyword);
+  if (input.sources) return `sources: ${str(input.sources)}`;
+
+  return JSON.stringify(input).slice(0, 60);
+}
+
+const PREVIEWABLE_EXTS = [
+  "png", "jpg", "jpeg", "gif", "webp", "svg",
+  "pdf", "md", "txt", "json", "ts", "tsx", "js", "jsx", "py", "html", "css",
+  "mp3", "wav", "m4a", "mp4", "webm",
+];
+
+function isPreviewable(filePath: string): boolean {
+  const ext = filePath.split(".").pop()?.toLowerCase() || "";
+  return PREVIEWABLE_EXTS.includes(ext);
+}
+
+export function ToolUseBlock({ toolName, toolInput, toolId, onPreviewFile }: ToolUseBlockProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const colorClass = getToolColor(toolName);
+  const badge = getToolBadge(toolName);
+
+  const filePath = toolInput.file_path as string | undefined;
+  const canPreview = onPreviewFile && filePath && isPreviewable(filePath) &&
+    (toolName === "Write" || toolName === "Read" || toolName === "Edit");
+
+  return (
+    <div className={`my-2 border rounded ${colorClass}`}>
+      <div className="p-2 flex items-center justify-between">
+        {/* Collapse toggle — clickable label area */}
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={() => setIsExpanded(!isExpanded)}
+          onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setIsExpanded(!isExpanded); } }}
+          className="flex items-center gap-2 min-w-0 cursor-pointer hover:opacity-80 flex-1"
+        >
+          <span className="text-xs text-gray-400 shrink-0">{isExpanded ? "▼" : "▶"}</span>
+          {badge && (
+            <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded ${badge.color}`}>
+              {badge.label}
+            </span>
+          )}
+          <span className="text-xs font-semibold text-gray-600 uppercase shrink-0">
+            {getToolDisplayName(toolName)}
+          </span>
+          <span className="text-xs text-gray-500 truncate">
+            {getToolSummary(toolName, toolInput)}
+          </span>
+        </div>
+        {/* Preview button — separate from toggle, no nesting */}
+        {canPreview && (
+          <button
+            type="button"
+            onClick={() => onPreviewFile!(filePath!)}
+            className="text-[10px] px-2 py-0.5 rounded bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors shrink-0 ml-2"
+          >
+            Preview
+          </button>
+        )}
+      </div>
+      {isExpanded && (
+        <div className="p-2 border-t border-gray-200/50">
+          <pre className="text-xs bg-white p-2 rounded overflow-x-auto max-h-64 overflow-y-auto">
+            {JSON.stringify(toolInput, null, 2)}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}

package/client/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Claude World Studio</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+</body>
+</html>

package/client/index.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./styles/globals.css";
+
+const container = document.getElementById("root");
+if (container) {
+  const root = createRoot(container);
+  root.render(<App />);
+}

package/client/styles/globals.css

@@ -0,0 +1,48 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: #4b5563;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
+}
+
+/* Pulse dot animation */
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+.animate-pulse-dot {
+  animation: pulse-dot 1.5s ease-in-out infinite;
+}
+
+/* Typing indicator */
+@keyframes typing {
+  0% { opacity: 0.3; }
+  20% { opacity: 1; }
+  100% { opacity: 0.3; }
+}
+.typing-dot:nth-child(1) { animation: typing 1.4s infinite 0s; }
+.typing-dot:nth-child(2) { animation: typing 1.4s infinite 0.2s; }
+.typing-dot:nth-child(3) { animation: typing 1.4s infinite 0.4s; }
+
+/* Workflow step connector */
+.workflow-step + .workflow-step::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: -12px;
+  width: 2px;
+  height: 12px;
+  background: #d1d5db;
+}

package/demo/capture-remaining.mjs

@@ -0,0 +1,73 @@
+import { chromium } from "playwright";
+import { setTimeout } from "timers/promises";
+
+const BASE = "http://localhost:5173";
+const OUT = new URL(".", import.meta.url).pathname;
+
+(async () => {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 1440, height: 900 },
+    recordVideo: { dir: OUT, size: { width: 1440, height: 900 } },
+  });
+  const page = await context.newPage();
+
+  // Wait for server
+  for (let i = 0; i < 30; i++) {
+    try { await page.goto(BASE, { timeout: 3000 }); break; }
+    catch { console.log(`Waiting... (${i + 1})`); await setTimeout(2000); }
+  }
+  await setTimeout(2000);
+
+  // Click existing session with rich content (Claude Code 4.6)
+  const session46 = page.locator('[class*="cursor-pointer"]').filter({ hasText: "Claude Code 4.6" }).first();
+  if (await session46.count() > 0) {
+    await session46.click();
+    await setTimeout(2000);
+    await page.screenshot({ path: `${OUT}07-history-rich.png`, fullPage: true });
+    console.log("✓ 07-history-rich.png");
+
+    // Open file explorer
+    const filesBtn = page.locator('button').filter({ hasText: /^檔案$|^Files$/ }).first();
+    await filesBtn.click();
+    await setTimeout(2000);
+    await page.screenshot({ path: `${OUT}08-file-explorer.png` });
+    console.log("✓ 08-file-explorer.png");
+    await filesBtn.click();
+    await setTimeout(500);
+  }
+
+  // Switch to EN
+  await page.click('button:has-text("EN")');
+  await setTimeout(1000);
+
+  // New session in EN
+  await page.click('button:has-text("New Session")');
+  await setTimeout(1500);
+  await page.screenshot({ path: `${OUT}09-en-cards.png` });
+  console.log("✓ 09-en-cards.png");
+
+  // Switch to JA
+  await page.click('button:has-text("JA")');
+  await setTimeout(500);
+  await page.click('button:has-text("New Session")');
+  await setTimeout(1500);
+  await page.screenshot({ path: `${OUT}10-ja-cards.png` });
+  console.log("✓ 10-ja-cards.png");
+
+  // Back to TW, show settings
+  await page.click('button:has-text("TW")');
+  await setTimeout(500);
+  const settingsBtn = page.locator('button:has-text("Settings")');
+  if (await settingsBtn.count() > 0) {
+    await settingsBtn.click();
+    await setTimeout(1000);
+    await page.screenshot({ path: `${OUT}11-settings.png` });
+    console.log("✓ 11-settings.png");
+  }
+
+  await page.close();
+  await context.close();
+  await browser.close();
+  console.log("\n✅ Remaining screenshots captured");
+})();

package/demo/capture.mjs

@@ -0,0 +1,110 @@
+import { chromium } from "playwright";
+import { setTimeout } from "timers/promises";
+
+const BASE = "http://localhost:5173";
+const OUT = new URL(".", import.meta.url).pathname;
+
+(async () => {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 1440, height: 900 },
+    recordVideo: { dir: OUT, size: { width: 1440, height: 900 } },
+  });
+  const page = await context.newPage();
+
+  // Wait for Vite to be ready (retry)
+  for (let i = 0; i < 20; i++) {
+    try {
+      await page.goto(BASE, { timeout: 5000 });
+      break;
+    } catch {
+      console.log(`Waiting for server... (${i + 1})`);
+      await setTimeout(2000);
+    }
+  }
+  // 1. Welcome screen
+  await setTimeout(2000);
+  await page.screenshot({ path: `${OUT}01-welcome.png` });
+  console.log("✓ 01-welcome.png");
+
+  // 2. Create new session → Empty chat with pipeline cards
+  await page.click('button:has-text("開始新 Session")');
+  await setTimeout(1500);
+  await page.screenshot({ path: `${OUT}02-pipeline-cards.png` });
+  console.log("✓ 02-pipeline-cards.png");
+
+  // 3. Click 指定主題 → input fill + hint
+  await page.click('button:has-text("指定主題發文")');
+  await setTimeout(1000);
+  await page.screenshot({ path: `${OUT}03-custom-topic-fill.png` });
+  console.log("✓ 03-custom-topic-fill.png");
+
+  // 4. Type topic and send
+  const textarea = page.locator("textarea");
+  await textarea.fill("AI Agent 自動化工作流 2026 最新趨勢");
+  await setTimeout(500);
+  await page.screenshot({ path: `${OUT}04-topic-typed.png` });
+  console.log("✓ 04-topic-typed.png");
+
+  await textarea.press("Enter");
+  await setTimeout(3000);
+  await page.screenshot({ path: `${OUT}05-loading-state.png` });
+  console.log("✓ 05-loading-state.png");
+
+  // 5. Wait for response with tool calls
+  await setTimeout(15000);
+  await page.screenshot({ path: `${OUT}06-tool-calls.png` });
+  console.log("✓ 06-tool-calls.png");
+
+  // 6. Wait more for full response
+  await setTimeout(30000);
+  await page.screenshot({ path: `${OUT}07-response.png`, fullPage: true });
+  console.log("✓ 07-response.png");
+
+  // 7. Open file explorer
+  const filesBtn = page.locator('button:has-text("Files"), button:has-text("檔案")').first();
+  await filesBtn.click();
+  await setTimeout(2000);
+  await page.screenshot({ path: `${OUT}08-file-explorer.png` });
+  console.log("✓ 08-file-explorer.png");
+  await filesBtn.click(); // close
+
+  // 8. Switch language to EN
+  await page.click('button:has-text("EN")');
+  await setTimeout(1500);
+  await page.screenshot({ path: `${OUT}09-english-mode.png` });
+  console.log("✓ 09-english-mode.png");
+
+  // 9. Create new session in EN to show EN cards
+  await page.click('button:has-text("New Session")');
+  await setTimeout(1500);
+  await page.screenshot({ path: `${OUT}10-en-pipeline-cards.png` });
+  console.log("✓ 10-en-pipeline-cards.png");
+
+  // 10. Switch to JA
+  await page.click('button:has-text("JA")');
+  await setTimeout(500);
+  await page.click('button:has-text("New Session")');
+  await setTimeout(1500);
+  await page.screenshot({ path: `${OUT}11-ja-pipeline-cards.png` });
+  console.log("✓ 11-ja-pipeline-cards.png");
+
+  // Switch back to TW
+  await page.click('button:has-text("TW")');
+  await setTimeout(500);
+
+  // 12. Click existing session with history to show rich content
+  const sessionItem = page.locator('[class*="cursor-pointer"]').filter({ hasText: "Claude Code 4.6" }).first();
+  if (await sessionItem.count() > 0) {
+    await sessionItem.click();
+    await setTimeout(2000);
+    await page.screenshot({ path: `${OUT}12-history-rich-content.png`, fullPage: true });
+    console.log("✓ 12-history-rich-content.png");
+  }
+
+  // Done
+  await page.close();
+  await context.close();
+  await browser.close();
+  console.log("\n✅ All screenshots captured in demo/");
+})();

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "claude-world-studio",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Claude World Studio - Trend Discovery to Content Publishing Pipeline",
+  "scripts": {
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
+    "dev:server": "tsx watch server/server.ts",
+    "dev:client": "vite --port 5173",
+    "start": "tsx server/server.ts",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@anthropic-ai/claude-agent-sdk": "^0.1.28",
+    "better-sqlite3": "^11.7.0",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
+    "express": "^4.21.0",
+    "playwright": "^1.58.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^10.1.0",
+    "react-use-websocket": "^4.13.0",
+    "rehype-sanitize": "^6.0.0",
+    "uuid": "^10.0.0",
+    "ws": "^8.18.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/better-sqlite3": "^7.6.12",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
+    "@types/ws": "^8.5.12",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.20",
+    "concurrently": "^9.0.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "tsx": "^4.19.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};