@shirokuma-library/shirokuma-docs 0.1.0-alpha.10

package/portal/app/api-tools/api-tools-client.tsx

@@ -0,0 +1,411 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import {
+  Wrench,
+  Play,
+  Pause,
+  RotateCcw,
+  Plus,
+  Search,
+  List,
+  Layers,
+  Database,
+  ArrowRight,
+  FlaskConical,
+  type LucideIcon,
+} from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  getCoverageColor,
+  getCoverageBgColor,
+} from "@/components/shared/coverage-score-bar";
+
+// Category type
+type CategoryType = "sessions" | "entities" | "projects" | "default";
+
+// Category config
+interface CategoryConfig {
+  icon: LucideIcon;
+  color: string;
+  bgColor: string;
+  labelJa: string;
+}
+
+const categoryConfigs: Record<CategoryType, CategoryConfig> = {
+  sessions: {
+    icon: Play,
+    color: "text-green-500",
+    bgColor: "bg-green-500/10",
+    labelJa: "セッション管理",
+  },
+  entities: {
+    icon: Layers,
+    color: "text-blue-500",
+    bgColor: "bg-blue-500/10",
+    labelJa: "エンティティ管理",
+  },
+  projects: {
+    icon: Database,
+    color: "text-purple-500",
+    bgColor: "bg-purple-500/10",
+    labelJa: "プロジェクト管理",
+  },
+  default: {
+    icon: Wrench,
+    color: "text-gray-500",
+    bgColor: "bg-gray-500/10",
+    labelJa: "その他",
+  },
+};
+
+// Tool action icons
+const actionIcons: Record<string, LucideIcon> = {
+  start: Play,
+  pause: Pause,
+  resume: RotateCcw,
+  create: Plus,
+  search: Search,
+  list: List,
+  get: Search,
+  add: Plus,
+  complete: Play,
+  update: Wrench,
+  link: Layers,
+};
+
+function getActionIcon(toolName: string): LucideIcon {
+  for (const [action, icon] of Object.entries(actionIcons)) {
+    if (toolName.toLowerCase().includes(action)) {
+      return icon;
+    }
+  }
+  return Wrench;
+}
+
+// Types
+export interface ApiToolData {
+  name: string;
+  description: string;
+  params?: Array<{
+    name: string;
+    type: string;
+    description?: string;
+    required: boolean;
+  }>;
+  sourceFile?: string;
+  category?: string;
+  feature?: string;
+  dbTables?: string[];
+  relatedTests?: string;
+  httpMethod?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
+  authLevel?: string;
+  tests?: Array<{
+    target: string;
+    testdoc: string;
+    file: string;
+  }>;
+  testCoverage?: {
+    hasTest: boolean;
+    totalTests: number;
+    coverageScore: number;
+  };
+}
+
+export interface ApiToolsData {
+  tools: ApiToolData[];
+  generatedAt: string;
+  projectPath?: string;
+}
+
+interface ApiToolsClientProps {
+  data: ApiToolsData;
+}
+
+// CategoryCard component (like ModuleCard in Feature Map)
+function CategoryCard({
+  category,
+  tools,
+  config,
+}: {
+  category: string;
+  tools: ApiToolData[];
+  config: CategoryConfig;
+}) {
+  const Icon = config.icon;
+  const categoryIndexLink = `/api-tools/${category}/`;
+
+  // Calculate category stats
+  const totalTests = tools.reduce(
+    (sum, tool) => sum + (tool.testCoverage?.totalTests || 0),
+    0
+  );
+
+  if (tools.length === 0) return null;
+
+  return (
+    <Card className="overflow-hidden">
+      <CardHeader className="pb-2">
+        <div className="flex items-start justify-between">
+          <Link
+            href={categoryIndexLink}
+            className="flex items-center gap-2 group"
+          >
+            <div className={`rounded-md p-1.5 ${config.bgColor}`}>
+              <Icon className={`h-4 w-4 ${config.color}`} />
+            </div>
+            <div>
+              <CardTitle className="text-base group-hover:text-primary transition-colors">
+                {config.labelJa}
+              </CardTitle>
+              <CardDescription className="text-xs">
+                {tools.length} tool{tools.length !== 1 ? "s" : ""}
+              </CardDescription>
+            </div>
+          </Link>
+          <div className="flex items-center gap-2">
+            {totalTests > 0 && (
+              <Badge variant="outline" className="text-xs gap-1">
+                <FlaskConical className="h-3 w-3" />
+                {totalTests}
+              </Badge>
+            )}
+            <Badge variant="secondary" className="text-xs">
+              MCP
+            </Badge>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-2">
+        <div className="space-y-2">
+          {tools.slice(0, 5).map((tool) => {
+            const ActionIcon = getActionIcon(tool.name);
+            const coverage = tool.testCoverage;
+            return (
+              <Link
+                key={tool.name}
+                href={`/api-tools/${tool.name}`}
+                className="group flex items-center justify-between rounded-md border border-border bg-muted/50 px-3 py-2 text-sm transition-colors hover:bg-muted"
+              >
+                <div className="min-w-0 flex-1 flex items-center gap-2">
+                  <ActionIcon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                  <div className="min-w-0">
+                    <p className="truncate font-mono text-sm group-hover:text-primary">
+                      {tool.name}
+                    </p>
+                    {tool.description && (
+                      <p className="truncate text-xs text-muted-foreground">
+                        {tool.description}
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="ml-2 flex items-center gap-2 flex-shrink-0">
+                  {coverage && coverage.totalTests > 0 && (
+                    <Badge
+                      variant="outline"
+                      className={`text-xs gap-1 ${getCoverageBgColor(coverage.coverageScore)}`}
+                    >
+                      <FlaskConical
+                        className={`h-3 w-3 ${getCoverageColor(coverage.coverageScore)}`}
+                      />
+                      <span className={getCoverageColor(coverage.coverageScore)}>
+                        {coverage.totalTests}
+                      </span>
+                    </Badge>
+                  )}
+                  <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-primary" />
+                </div>
+              </Link>
+            );
+          })}
+          <Link
+            href={categoryIndexLink}
+            className="flex items-center justify-center gap-1 text-sm text-muted-foreground hover:text-primary pt-2"
+          >
+            すべて見る ({tools.length}件)
+            <ArrowRight className="h-3 w-3" />
+          </Link>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Category content component - shows all categories as cards
+function CategoryContent({
+  toolsByCategory,
+}: {
+  toolsByCategory: Record<string, ApiToolData[]>;
+}) {
+  const categories = Object.keys(toolsByCategory).sort() as CategoryType[];
+  return (
+    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+      {categories.map((cat) => {
+        const config = categoryConfigs[cat] || categoryConfigs.default;
+        return (
+          <CategoryCard
+            key={cat}
+            category={cat}
+            tools={toolsByCategory[cat]}
+            config={config}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export function ApiToolsClient({ data }: ApiToolsClientProps) {
+  const [activeTab, setActiveTab] = useState<CategoryType | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  // Group tools by category
+  const toolsByCategory: Record<string, ApiToolData[]> = {};
+  for (const tool of data.tools) {
+    const category = tool.category || "default";
+    if (!toolsByCategory[category]) {
+      toolsByCategory[category] = [];
+    }
+    toolsByCategory[category].push(tool);
+  }
+
+  const categories = Object.keys(toolsByCategory).sort() as CategoryType[];
+
+  // Handle URL hash on mount and hash changes
+  useEffect(() => {
+    setMounted(true);
+
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1);
+      if (categories.includes(hash as CategoryType)) {
+        setActiveTab(hash as CategoryType);
+      } else {
+        setActiveTab(null); // Show all
+      }
+    };
+
+    // Check initial hash
+    handleHashChange();
+
+    // Listen for hash changes
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [categories]);
+
+  // Update URL hash when tab changes
+  const handleTabChange = (value: CategoryType | null) => {
+    setActiveTab(value);
+    if (value) {
+      window.history.pushState(null, "", `#${value}`);
+    } else {
+      window.history.pushState(null, "", window.location.pathname);
+    }
+  };
+
+  // Calculate counts for summary cards (no "All" - categories only)
+  const counts = categories.map((cat) => {
+    const config = categoryConfigs[cat] || categoryConfigs.default;
+    return {
+      key: cat,
+      label: config.labelJa,
+      labelJa: config.labelJa,
+      count: toolsByCategory[cat]?.length || 0,
+      icon: config.icon,
+      color: config.color,
+      bgColor: config.bgColor,
+    };
+  });
+
+  if (!mounted) {
+    // SSR placeholder to prevent hydration mismatch
+    return (
+      <div className="space-y-8">
+        <div className="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {counts.map((item) => {
+            const Icon = item.icon;
+            return (
+              <div
+                key={item.key}
+                className="flex items-center gap-3 rounded-lg border border-border bg-card p-4"
+              >
+                <div className={`rounded-lg p-2 ${item.bgColor}`}>
+                  <Icon className={`h-5 w-5 ${item.color}`} />
+                </div>
+                <div>
+                  <p className="text-2xl font-bold">{item.count}</p>
+                  <p className="text-sm text-muted-foreground">{item.labelJa}</p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Stats summary */}
+      <div className="flex items-center justify-end gap-4 text-sm text-muted-foreground">
+        <span>{data.tools.length} tools</span>
+        <span>{categories.length} categories</span>
+      </div>
+
+      {/* Clickable Summary Cards */}
+      <div className="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {counts.map((item) => {
+            const Icon = item.icon;
+            const isActive = activeTab === item.key;
+            return (
+              <button
+                key={item.key}
+                onClick={() => handleTabChange(isActive ? null : item.key)}
+                className={`flex items-center gap-3 rounded-lg border p-4 text-left transition-all hover:shadow-md ${
+                  isActive
+                    ? "border-primary bg-primary/5 ring-2 ring-primary/20"
+                    : "border-border bg-card hover:border-primary/50"
+                }`}
+              >
+                <div className={`rounded-lg p-2 ${item.bgColor}`}>
+                  <Icon className={`h-5 w-5 ${item.color}`} />
+                </div>
+                <div>
+                  <p className="text-2xl font-bold">{item.count}</p>
+                  <p className="text-sm text-muted-foreground">{item.labelJa}</p>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+      {/* Content */}
+      {activeTab === null ? (
+        // Show all categories
+        <CategoryContent toolsByCategory={toolsByCategory} />
+      ) : (
+        // Show filtered category
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <CategoryCard
+            category={activeTab}
+            tools={toolsByCategory[activeTab] || []}
+            config={categoryConfigs[activeTab] || categoryConfigs.default}
+          />
+        </div>
+      )}
+
+      {/* Generated timestamp */}
+      <footer className="text-center text-sm text-muted-foreground">
+        <p>Generated at {new Date(data.generatedAt).toLocaleString()}</p>
+      </footer>
+    </div>
+  );
+}

package/portal/app/api-tools/api-tools-document.tsx

@@ -0,0 +1,240 @@
+/**
+ * API Tools - ドキュメント形式表示
+ *
+ * カテゴリ別にアコーディオンとテーブルで表示
+ */
+
+import Link from "next/link";
+import {
+  Play,
+  Layers,
+  Database,
+  Wrench,
+  FlaskConical,
+  Shield,
+  ExternalLink,
+  type LucideIcon,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { DocSection, DocTable, DocParamsTable, type DocTableColumn } from "@/components/document";
+import { MethodBadge, type HttpMethod } from "@/components/swagger";
+import type { ApiToolsData, ApiToolData } from "./api-tools-client";
+
+// Category config
+interface CategoryConfig {
+  icon: LucideIcon;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+  labelJa: string;
+}
+
+const categoryConfigs: Record<string, CategoryConfig> = {
+  sessions: {
+    icon: Play,
+    color: "text-green-500",
+    bgColor: "bg-green-500/10",
+    borderColor: "border-green-500/30",
+    labelJa: "Session Management",
+  },
+  entities: {
+    icon: Layers,
+    color: "text-blue-500",
+    bgColor: "bg-blue-500/10",
+    borderColor: "border-blue-500/30",
+    labelJa: "Entity Management",
+  },
+  projects: {
+    icon: Database,
+    color: "text-purple-500",
+    bgColor: "bg-purple-500/10",
+    borderColor: "border-purple-500/30",
+    labelJa: "Project Management",
+  },
+  reviews: {
+    icon: Wrench,
+    color: "text-amber-500",
+    bgColor: "bg-amber-500/10",
+    borderColor: "border-amber-500/30",
+    labelJa: "Review Management",
+  },
+  default: {
+    icon: Wrench,
+    color: "text-gray-500",
+    bgColor: "bg-gray-500/10",
+    borderColor: "border-gray-500/30",
+    labelJa: "Other Tools",
+  },
+};
+
+interface ApiToolsDocumentProps {
+  data: ApiToolsData;
+}
+
+/**
+ * カテゴリ別ツールセクション
+ */
+function CategorySection({
+  category,
+  tools,
+  config,
+}: {
+  category: string;
+  tools: ApiToolData[];
+  config: CategoryConfig;
+}) {
+  const Icon = config.icon;
+  const totalTests = tools.reduce(
+    (sum, tool) => sum + (tool.testCoverage?.totalTests || 0),
+    0
+  );
+
+  return (
+    <div className={`rounded-lg border ${config.borderColor} overflow-hidden`}>
+      {/* Category header */}
+      <div className={`flex items-center gap-2 px-4 py-3 ${config.bgColor}`}>
+        <Icon className={`h-4 w-4 ${config.color}`} />
+        <span className="font-semibold text-sm">{config.labelJa}</span>
+        <span className="text-xs text-muted-foreground ml-2">
+          ({tools.length} tools)
+        </span>
+        {totalTests > 0 && (
+          <Badge variant="outline" className="text-xs gap-1 ml-auto">
+            <FlaskConical className="h-3 w-3" />
+            {totalTests} tests
+          </Badge>
+        )}
+      </div>
+
+      {/* Tools list */}
+      <div className="divide-y">
+        {tools.map((tool) => (
+          <ToolRow key={tool.name} tool={tool} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * ツール行（展開可能）
+ */
+function ToolRow({ tool }: { tool: ApiToolData }) {
+  const method: HttpMethod = tool.httpMethod || "POST";
+  const coverage = tool.testCoverage;
+
+  return (
+    <details className="group">
+      <summary className="flex items-center gap-3 px-4 py-2 cursor-pointer hover:bg-muted/50 list-none">
+        <MethodBadge method={method} />
+        <span className="font-mono text-sm font-medium group-hover:text-primary transition-colors">
+          {tool.name}
+        </span>
+        <span className="text-sm text-muted-foreground truncate flex-1">
+          {tool.description}
+        </span>
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {coverage && coverage.totalTests > 0 && (
+            <Badge variant="outline" className="text-xs gap-1">
+              <FlaskConical className="h-3 w-3" />
+              {coverage.totalTests}
+            </Badge>
+          )}
+          {tool.authLevel && tool.authLevel !== "none" && (
+            <Badge variant="outline" className="text-xs gap-1">
+              <Shield className="h-3 w-3" />
+              {tool.authLevel}
+            </Badge>
+          )}
+          <span className="text-xs text-muted-foreground group-open:rotate-90 transition-transform">
+            ▶
+          </span>
+        </div>
+      </summary>
+
+      {/* Expanded content */}
+      <div className="pl-[68px] pr-4 pb-4 space-y-4 bg-muted/20">
+        {/* Parameters */}
+        <div>
+          <h4 className="text-sm font-semibold mb-2 text-muted-foreground">
+            Parameters
+          </h4>
+          <DocParamsTable params={tool.params || []} />
+        </div>
+
+        {/* Metadata */}
+        <div className="flex flex-wrap gap-4 text-xs text-muted-foreground">
+          {tool.feature && (
+            <div className="flex items-center gap-1">
+              <span className="font-medium">Feature:</span>
+              <Badge variant="secondary" className="text-xs">
+                {tool.feature}
+              </Badge>
+            </div>
+          )}
+          {tool.dbTables && tool.dbTables.length > 0 && (
+            <div className="flex items-center gap-1">
+              <Database className="h-3 w-3" />
+              <span>{tool.dbTables.join(", ")}</span>
+            </div>
+          )}
+          {tool.sourceFile && (
+            <div className="flex items-center gap-1">
+              <span className="font-medium">Source:</span>
+              <code className="text-xs">{tool.sourceFile}</code>
+            </div>
+          )}
+        </div>
+
+        {/* Detail link */}
+        <Link
+          href={`/api-tools/${tool.name}`}
+          className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+        >
+          View details
+          <ExternalLink className="h-3 w-3" />
+        </Link>
+      </div>
+    </details>
+  );
+}
+
+/**
+ * API Tools ドキュメント形式コンポーネント
+ */
+export function ApiToolsDocument({ data }: ApiToolsDocumentProps) {
+  // Group tools by category
+  const grouped: Record<string, ApiToolData[]> = {};
+  for (const tool of data.tools) {
+    const category = tool.category || "default";
+    if (!grouped[category]) {
+      grouped[category] = [];
+    }
+    grouped[category].push(tool);
+  }
+
+  const categories = Object.keys(grouped).sort();
+
+  return (
+    <div className="space-y-6">
+      {/* Summary stats */}
+      <div className="flex items-center justify-between text-sm text-muted-foreground">
+        <span>{data.tools.length} tools in {categories.length} categories</span>
+        <span>Generated at {new Date(data.generatedAt).toLocaleString()}</span>
+      </div>
+
+      {/* Categories */}
+      {categories.map((category) => {
+        const config = categoryConfigs[category] || categoryConfigs.default;
+        return (
+          <CategorySection
+            key={category}
+            category={category}
+            tools={grouped[category]}
+            config={config}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/portal/app/api-tools/page.tsx

@@ -0,0 +1,56 @@
+import { Bot } from "lucide-react";
+import { loadApiTools } from "@/lib/data-loader";
+import { getPortalFormat } from "@/lib/format";
+import { ApiToolsClient, type ApiToolsData } from "./api-tools-client";
+import { ApiToolsDocument } from "./api-tools-document";
+
+export default async function ApiToolsPage() {
+  const data = (await loadApiTools()) as ApiToolsData | null;
+  const format = getPortalFormat();
+
+  if (!data || !data.tools) {
+    return (
+      <div className="space-y-8">
+        <header>
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg bg-purple-500/10 p-2">
+              <Bot className="h-6 w-6 text-purple-500" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold tracking-tight">API Tools</h1>
+              <p className="mt-1 text-muted-foreground">
+                MCPツールデータがありません
+              </p>
+            </div>
+          </div>
+        </header>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <header>
+        <div className="flex items-center gap-3">
+          <div className="rounded-lg bg-purple-500/10 p-2">
+            <Bot className="h-6 w-6 text-purple-500" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">API Tools</h1>
+            <p className="mt-1 text-muted-foreground">
+              AI アシスタント向け API ツール一覧
+            </p>
+          </div>
+        </div>
+      </header>
+
+      {/* Content - format determined at build time */}
+      {format === "document" ? (
+        <ApiToolsDocument data={data} />
+      ) : (
+        <ApiToolsClient data={data} />
+      )}
+    </div>
+  );
+}