feat: add tools navigation and utilities with JSON View, Mock Tool 1, and Mock Tool 2

Author: tinywaves

AGENTS.md

@@ -119,6 +119,7 @@ Reference docs (for agents):
 - In TypeScript source files, omit `.js` extensions for local relative imports.
 - Avoid meaningless blank lines; use blank lines to separate semantic blocks, not after every statement. Keep a blank line before `return`.
 - Keep strict TypeScript settings satisfied; avoid weakening types to silence errors.
+- **Inline over premature extraction**: keep trivial logic at the call site (e.g. JSX `onClick={() => setInput('')}`); extract a named function only when the logic grows, is reused, or becomes hard to read inline. Do not add one-line wrappers like `handleClear()` that only forward to a single call.
 - **CLI**: use `cac` for command parsing; `terminal-link` for clickable URLs; `console.info` for startup messages.
 - **CLI server**: use `hono` with `@hono/node-server`; `serveStatic` from `dist/web/` (resolved inline in `startWebUiServer()`).
 - **Web UI**: configure Vite in `packages/web/vite.config.ts`; React Compiler via `@rolldown/plugin-babel` + `reactCompilerPreset()` from `@vitejs/plugin-react`; Tailwind via `@tailwindcss/vite` and imports in `src/main.css`.

packages/web/src/components/layout/app-shell.tsx

@@ -1,19 +1,60 @@
-import { Outlet, useLocation } from 'react-router';
+import { Link, Outlet, useLocation } from 'react-router';
 import { AppSidebar } from '@/components/layout/app-sidebar';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from '@/components/ui/breadcrumb';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
 import { Separator } from '@/components/ui/separator';
 import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
 import { TooltipProvider } from '@/components/ui/tooltip';
+import { getToolById } from '@/tools/registry';
 
 const pageTitles: Record<string, string> = {
   '/dashboard': 'Dashboard',
   '/settings': 'Settings',
+  '/tools': 'Tools',
 };
 
-export function AppShell() {
+function AppBreadcrumb() {
   const { pathname } = useLocation();
+
+  if (pathname.startsWith('/tools/')) {
+    const toolId = pathname.slice('/tools/'.length);
+    const tool = getToolById(toolId);
+
+    return (
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink render={<Link to="/tools" />}>Tools</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>{tool?.name ?? 'Tool'}</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    );
+  }
+
   const pageTitle = pageTitles[pathname] ?? 'Foundry';
 
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbPage>{pageTitle}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}
+
+export function AppShell() {
   return (
     <SidebarProvider className="h-dvh min-h-0 overflow-hidden">
       <TooltipProvider>
@@ -30,13 +71,7 @@ export function AppShell() {
                 data-vertical:h-4
               "
             />
-            <Breadcrumb>
-              <BreadcrumbList>
-                <BreadcrumbItem>
-                  <BreadcrumbPage>{pageTitle}</BreadcrumbPage>
-                </BreadcrumbItem>
-              </BreadcrumbList>
-            </Breadcrumb>
+            <AppBreadcrumb />
           </header>
           <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
             <Outlet />

packages/web/src/components/layout/app-sidebar.tsx

@@ -1,22 +1,33 @@
-import { LayoutDashboardIcon, SettingsIcon } from 'lucide-react';
+import { LayoutDashboardIcon, SettingsIcon, WrenchIcon } from 'lucide-react';
 import { NavLink, useLocation } from 'react-router';
 import {
   Sidebar,
   SidebarContent,
   SidebarGroup,
   SidebarGroupContent,
+  SidebarGroupLabel,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarRail,
 } from '@/components/ui/sidebar';
 
-const navItems = [
+const generalNavItems = [
   { title: 'Dashboard', to: '/dashboard', icon: LayoutDashboardIcon },
   { title: 'Settings', to: '/settings', icon: SettingsIcon },
 ] as const;
 
+const toolsNavItems = [{ title: 'Tools', to: '/tools', icon: WrenchIcon }] as const;
+
+function isNavItemActive(pathname: string, to: string) {
+  if (to === '/tools') {
+    return pathname.startsWith('/tools');
+  }
+
+  return pathname === to;
+}
+
 export function AppSidebar() {
   const { pathname } = useLocation();
 
@@ -38,11 +49,30 @@ export function AppSidebar() {
         <SidebarGroup>
           <SidebarGroupContent>
             <SidebarMenu>
-              {navItems.map((item) => (
+              {generalNavItems.map((item) => (
+                <SidebarMenuItem key={item.to}>
+                  <SidebarMenuButton
+                    render={<NavLink to={item.to} />}
+                    isActive={isNavItemActive(pathname, item.to)}
+                    tooltip={item.title}
+                  >
+                    <item.icon />
+                    <span>{item.title}</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Tools</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {toolsNavItems.map((item) => (
                 <SidebarMenuItem key={item.to}>
                   <SidebarMenuButton
                     render={<NavLink to={item.to} />}
-                    isActive={pathname === item.to}
+                    isActive={isNavItemActive(pathname, item.to)}
                     tooltip={item.title}
                   >
                     <item.icon />

packages/web/src/pages/tools/detail.tsx

@@ -0,0 +1,72 @@
+import { ArrowLeftIcon } from 'lucide-react';
+import { Suspense } from 'react';
+import { Link, useParams } from 'react-router';
+import { Skeleton } from '@/components/ui/skeleton';
+import { getToolById } from '@/tools/registry';
+
+function ToolLoadingFallback() {
+  return (
+    <div className="flex flex-col gap-3">
+      <Skeleton className="h-8 w-full" />
+      <Skeleton className="h-64 w-full" />
+    </div>
+  );
+}
+
+export function ToolDetailPage() {
+  const { toolId } = useParams();
+  const tool = toolId ? getToolById(toolId) : undefined;
+
+  if (!tool) {
+    return (
+      <div className="flex flex-col gap-4 p-6">
+        <Link
+          to="/tools"
+          className="
+            text-muted-foreground
+            hover:text-foreground
+            inline-flex w-fit items-center gap-1.5 text-sm transition-colors
+          "
+        >
+          <ArrowLeftIcon className="size-4" />
+          Back to Tools
+        </Link>
+        <div className="bg-card text-card-foreground rounded-xl border p-6">
+          <h1 className="text-xl font-semibold">Tool not found</h1>
+          <p className="text-muted-foreground mt-2 text-sm">
+            The requested tool does not exist.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const ToolComponent = tool.component;
+
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <Link
+        to="/tools"
+        className="
+          text-muted-foreground
+          hover:text-foreground
+          inline-flex w-fit items-center gap-1.5 text-sm transition-colors
+        "
+      >
+        <ArrowLeftIcon className="size-4" />
+        Back to Tools
+      </Link>
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">{tool.name}</h1>
+        <p className="text-muted-foreground text-sm">{tool.description}</p>
+      </div>
+      <div
+        className="bg-card text-card-foreground min-h-80 rounded-xl border p-4"
+      >
+        <Suspense fallback={<ToolLoadingFallback />}>
+          <ToolComponent />
+        </Suspense>
+      </div>
+    </div>
+  );
+}

packages/web/src/pages/tools/index.tsx

@@ -0,0 +1,43 @@
+import { Link } from 'react-router';
+import { tools } from '@/tools/registry';
+import { cn } from '@/lib/utils';
+
+export function ToolsIndexPage() {
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Tools</h1>
+        <p className="text-muted-foreground text-sm">
+          Small utilities for everyday dev tasks.
+        </p>
+      </div>
+      <div
+        className="
+          grid gap-4
+          sm:grid-cols-2
+          lg:grid-cols-3
+        "
+      >
+        {tools.map((tool) => (
+          <Link
+            key={tool.id}
+            to={`/tools/${tool.id}`}
+            className={cn(
+              `
+                bg-card text-card-foreground flex flex-col gap-3 rounded-xl
+                border p-4 transition-colors
+              `,
+              `hover:border-primary/30 hover:shadow-sm`,
+            )}
+          >
+            <tool.icon className="text-muted-foreground size-8" />
+            <div className="flex flex-col gap-1">
+              <span className="font-medium">{tool.name}</span>
+              <span className="text-muted-foreground text-sm">{tool.description}</span>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

packages/web/src/routes.tsx

@@ -2,6 +2,8 @@ import { createHashRouter, Navigate } from 'react-router';
 import { AppShell } from '@/components/layout/app-shell';
 import { DashboardPage } from '@/pages/dashboard';
 import { SettingsPage } from '@/pages/settings';
+import { ToolDetailPage } from '@/pages/tools/detail';
+import { ToolsIndexPage } from '@/pages/tools/index';
 
 export const router = createHashRouter([
   {
@@ -11,6 +13,13 @@ export const router = createHashRouter([
       { index: true, element: <Navigate to="dashboard" replace /> },
       { path: 'dashboard', element: <DashboardPage /> },
       { path: 'settings', element: <SettingsPage /> },
+      {
+        path: 'tools',
+        children: [
+          { index: true, element: <ToolsIndexPage /> },
+          { path: ':toolId', element: <ToolDetailPage /> },
+        ],
+      },
     ],
   },
 ]);

packages/web/src/tools/json-view.tsx

@@ -0,0 +1,91 @@
+import { useMemo, useState } from 'react';
+import { Button } from '@/components/ui/button';
+
+export default function JsonViewTool() {
+  const [input, setInput] = useState('');
+
+  const result = useMemo(() => {
+    if (!input.trim()) {
+      return { ok: true as const, formatted: '' };
+    }
+
+    try {
+      const parsed: unknown = JSON.parse(input);
+
+      return { ok: true as const, formatted: JSON.stringify(parsed, null, 2) };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Invalid JSON';
+
+      return { ok: false as const, error: message };
+    }
+  }, [input]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={!result.ok || !input.trim()}
+          onClick={() => {
+            if (result.ok) {
+              setInput(result.formatted);
+            }
+          }}
+        >
+          Format
+        </Button>
+        <Button type="button" variant="outline" size="sm" onClick={() => setInput('')}>
+          Clear
+        </Button>
+      </div>
+      <div
+        className="
+          grid min-h-80 gap-4
+          lg:grid-cols-2
+        "
+      >
+        <div className="flex flex-col gap-2">
+          <label htmlFor="json-input" className="text-sm font-medium">
+            Input
+          </label>
+          <textarea
+            id="json-input"
+            value={input}
+            onChange={(event) => setInput(event.target.value)}
+            placeholder='{"key": "value"}'
+            spellCheck={false}
+            className="
+              bg-background
+              focus-visible:border-ring focus-visible:ring-ring/30
+              min-h-70 flex-1 resize-y rounded-xl border p-3 font-mono text-sm
+              outline-none
+              focus-visible:ring-3
+            "
+          />
+        </div>
+        <div className="flex flex-col gap-2">
+          <span className="text-sm font-medium">Output</span>
+          <div
+            className="
+              bg-muted/30 min-h-70 flex-1 overflow-auto rounded-xl border p-3
+            "
+          >
+            {input.trim()
+              ? (result.ok
+                  ? (
+                      <pre className="font-mono text-sm whitespace-pre-wrap">{result.formatted}</pre>
+                    )
+                  : (
+                      <p className="text-destructive text-sm">{result.error}</p>
+                    ))
+              : (
+                  <p className="text-muted-foreground text-sm">Enter JSON to see formatted output.</p>
+                )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}