@bamptee/aia-code 2.0.12 → 2.0.14

package/src/ui/public/components/test-quick.js

@@ -0,0 +1,276 @@
+/**
+ * @fileoverview Test-quick UI component
+ * Provides a user interface for managing test-quick items
+ */
+
+import React from 'react';
+import { api } from '/main.js';
+
+const STATUS_COLORS = {
+  pending: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
+  active: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+  completed: 'bg-green-500/20 text-green-400 border-green-500/30',
+  error: 'bg-red-500/20 text-red-400 border-red-500/30',
+};
+
+/**
+ * Status badge component
+ */
+function StatusBadge({ status }) {
+  return React.createElement('span', {
+    className: `inline-block px-2 py-0.5 text-xs rounded border ${STATUS_COLORS[status] || STATUS_COLORS.pending}`,
+  }, status);
+}
+
+/**
+ * Single item card component
+ */
+function TestQuickItemCard({ item, onStatusChange, onDelete }) {
+  const [updating, setUpdating] = React.useState(false);
+
+  async function handleStatusChange(newStatus) {
+    setUpdating(true);
+    try {
+      await api.patch(`/test-quick/${item.name}/status`, { status: newStatus });
+      onStatusChange();
+    } catch (err) {
+      console.error('Failed to update status:', err);
+    } finally {
+      setUpdating(false);
+    }
+  }
+
+  async function handleDelete() {
+    if (!confirm(`Delete "${item.name}"?`)) return;
+    try {
+      await api.delete(`/test-quick/${item.name}`);
+      onDelete();
+    } catch (err) {
+      console.error('Failed to delete:', err);
+    }
+  }
+
+  const statusOptions = ['pending', 'active', 'completed', 'error'];
+
+  return React.createElement('div', {
+    className: 'bg-aia-card border border-aia-border rounded-lg p-4 hover:border-aia-accent/30 transition-colors',
+  },
+    // Header row
+    React.createElement('div', { className: 'flex items-center justify-between mb-2' },
+      React.createElement('h3', { className: 'text-slate-100 font-semibold' }, item.name),
+      React.createElement(StatusBadge, { status: item.status }),
+    ),
+
+    // Description
+    item.description && React.createElement('p', {
+      className: 'text-sm text-slate-400 mb-3',
+    }, item.description),
+
+    // Timestamps
+    React.createElement('div', { className: 'flex gap-4 text-xs text-slate-500 mb-3' },
+      React.createElement('span', null, 'Created: ', new Date(item.createdAt).toLocaleDateString()),
+      item.updatedAt && React.createElement('span', null, 'Updated: ', new Date(item.updatedAt).toLocaleDateString()),
+    ),
+
+    // Actions
+    React.createElement('div', { className: 'flex items-center gap-2 pt-2 border-t border-aia-border' },
+      React.createElement('select', {
+        value: item.status,
+        onChange: (e) => handleStatusChange(e.target.value),
+        disabled: updating,
+        className: 'bg-slate-900 border border-aia-border rounded px-2 py-1 text-xs text-slate-300 focus:border-aia-accent focus:outline-none',
+      },
+        ...statusOptions.map(s =>
+          React.createElement('option', { key: s, value: s }, s)
+        )
+      ),
+      React.createElement('button', {
+        onClick: handleDelete,
+        className: 'ml-auto text-red-400 hover:text-red-300 text-xs px-2 py-1 rounded hover:bg-red-500/10',
+      }, 'Delete'),
+    ),
+  );
+}
+
+/**
+ * New item form component
+ */
+function NewItemForm({ onCreated }) {
+  const [name, setName] = React.useState('');
+  const [description, setDescription] = React.useState('');
+  const [error, setError] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      await api.post('/test-quick', { name, description });
+      setName('');
+      setDescription('');
+      onCreated();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return React.createElement('form', {
+    onSubmit: handleSubmit,
+    className: 'bg-aia-card border border-aia-border rounded-lg p-4 space-y-3',
+  },
+    React.createElement('h3', { className: 'text-sm font-semibold text-slate-200' }, 'New Item'),
+
+    React.createElement('div', { className: 'flex gap-2' },
+      React.createElement('input', {
+        type: 'text',
+        value: name,
+        onChange: e => setName(e.target.value),
+        placeholder: 'item-name',
+        disabled: loading,
+        className: 'bg-slate-900 border border-aia-border rounded px-3 py-1.5 text-sm text-slate-200 placeholder-slate-500 focus:border-aia-accent focus:outline-none flex-1',
+      }),
+      React.createElement('input', {
+        type: 'text',
+        value: description,
+        onChange: e => setDescription(e.target.value),
+        placeholder: 'Description (optional)',
+        disabled: loading,
+        className: 'bg-slate-900 border border-aia-border rounded px-3 py-1.5 text-sm text-slate-200 placeholder-slate-500 focus:border-aia-accent focus:outline-none flex-1',
+      }),
+    ),
+
+    React.createElement('div', { className: 'flex items-center gap-4' },
+      React.createElement('button', {
+        type: 'submit',
+        disabled: loading || !name,
+        className: 'bg-aia-accent/20 text-aia-accent border border-aia-accent/30 rounded px-4 py-1.5 text-sm hover:bg-aia-accent/30 disabled:opacity-40',
+      }, loading ? 'Creating...' : 'Create Item'),
+    ),
+
+    error && React.createElement('p', { className: 'text-red-400 text-xs' }, error),
+  );
+}
+
+/**
+ * Filter tabs component
+ */
+function FilterTabs({ filter, onChange, counts }) {
+  const tabs = [
+    { key: 'all', label: 'All', count: counts.all },
+    { key: 'pending', label: 'Pending', count: counts.pending },
+    { key: 'active', label: 'Active', count: counts.active },
+    { key: 'completed', label: 'Completed', count: counts.completed },
+  ];
+
+  return React.createElement('div', { className: 'flex gap-1 border-b border-aia-border' },
+    ...tabs.map(tab =>
+      React.createElement('button', {
+        key: tab.key,
+        onClick: () => onChange(tab.key),
+        className: `px-3 py-1.5 text-xs border-b-2 transition-colors ${
+          filter === tab.key
+            ? 'border-aia-accent text-aia-accent'
+            : 'border-transparent text-slate-500 hover:text-slate-300'
+        }`,
+      },
+        tab.label,
+        React.createElement('span', { className: 'text-slate-600 ml-1' }, `(${tab.count})`),
+      )
+    )
+  );
+}
+
+/**
+ * Main test-quick component
+ */
+export function TestQuickView() {
+  const [items, setItems] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  const [filter, setFilter] = React.useState('all');
+  const [error, setError] = React.useState('');
+
+  async function loadItems() {
+    try {
+      const result = await api.get('/test-quick');
+      setItems(result.items || []);
+      setError('');
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  React.useEffect(() => {
+    loadItems();
+  }, []);
+
+  async function handleClearCompleted() {
+    if (!confirm('Clear all completed items?')) return;
+    try {
+      await api.post('/test-quick/clear-completed');
+      loadItems();
+    } catch (err) {
+      setError(err.message);
+    }
+  }
+
+  // Filter items
+  const filteredItems = filter === 'all'
+    ? items
+    : items.filter(item => item.status === filter);
+
+  // Counts for tabs
+  const counts = {
+    all: items.length,
+    pending: items.filter(i => i.status === 'pending').length,
+    active: items.filter(i => i.status === 'active').length,
+    completed: items.filter(i => i.status === 'completed').length,
+  };
+
+  return React.createElement('div', { className: 'space-y-6' },
+    // Header
+    React.createElement('div', { className: 'flex items-center justify-between' },
+      React.createElement('h1', { className: 'text-xl font-bold text-slate-100' }, 'Test Quick'),
+      counts.completed > 0 && React.createElement('button', {
+        onClick: handleClearCompleted,
+        className: 'text-xs text-slate-400 hover:text-slate-200 px-2 py-1 rounded hover:bg-slate-800',
+      }, 'Clear Completed'),
+    ),
+
+    // New item form
+    React.createElement(NewItemForm, { onCreated: loadItems }),
+
+    // Filter tabs
+    !loading && items.length > 0 && React.createElement(FilterTabs, {
+      filter,
+      onChange: setFilter,
+      counts,
+    }),
+
+    // Error message
+    error && React.createElement('p', { className: 'text-red-400 text-sm' }, error),
+
+    // Items list
+    loading
+      ? React.createElement('p', { className: 'text-slate-500' }, 'Loading...')
+      : items.length === 0
+        ? React.createElement('p', { className: 'text-slate-500' }, 'No items yet. Create one to get started.')
+        : filteredItems.length === 0
+          ? React.createElement('p', { className: 'text-slate-500' }, 'No items match this filter.')
+          : React.createElement('div', { className: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4' },
+              ...filteredItems.map(item =>
+                React.createElement(TestQuickItemCard, {
+                  key: item.id,
+                  item,
+                  onStatusChange: loadItems,
+                  onDelete: loadItems,
+                })
+              )
+            ),
+  );
+}

package/src/ui/public/components/worktrunk-panel.js

@@ -9,8 +9,12 @@ export function WorktrunkPanel({ featureName }) {
   const [error, setError] = React.useState(null);
   const [showTerminal, setShowTerminal] = React.useState(false);
   const [terminalReady, setTerminalReady] = React.useState(false);
+
+  // Docker services state
+  const [services, setServices] = React.useState([]);
   const [servicesLoading, setServicesLoading] = React.useState(false);
-  const [servicesMessage, setServicesMessage] = React.useState(null);
+  const [serviceActionLoading, setServiceActionLoading] = React.useState(null); // service name being acted on
+  const [serviceTerminal, setServiceTerminal] = React.useState(null); // { service, name }
 
   const loadStatus = async () => {
     try {
@@ -22,10 +26,28 @@ export function WorktrunkPanel({ featureName }) {
     setLoading(false);
   };
 
+  const loadServices = async () => {
+    setServicesLoading(true);
+    try {
+      const data = await api.get(`/features/${featureName}/wt/services`);
+      setServices(data.services || []);
+    } catch {
+      setServices([]);
+    }
+    setServicesLoading(false);
+  };
+
   React.useEffect(() => {
     loadStatus();
   }, [featureName]);
 
+  // Load services when worktree is active and docker is available
+  React.useEffect(() => {
+    if (wtStatus?.hasWorktree && wtStatus?.docker?.available && wtStatus?.docker?.hasComposeFile) {
+      loadServices();
+    }
+  }, [wtStatus?.hasWorktree, wtStatus?.docker?.available, wtStatus?.docker?.hasComposeFile]);
+
   const handleCreateWorktree = async () => {
     setActionLoading(true);
     setError(null);
@@ -47,6 +69,7 @@ export function WorktrunkPanel({ featureName }) {
     try {
       await api.delete(`/features/${featureName}/wt`);
       setShowTerminal(false);
+      setServiceTerminal(null);
       await loadStatus();
     } catch (err) {
       setError(err.message);
@@ -64,37 +87,73 @@ export function WorktrunkPanel({ featureName }) {
         return;
       }
     }
+    setServiceTerminal(null);
     setShowTerminal(true);
   };
 
-  const handleStartServices = async () => {
+  // Service actions
+  const handleStartService = async (serviceName) => {
+    setServiceActionLoading(serviceName);
+    setError(null);
+    try {
+      await api.post(`/features/${featureName}/wt/services/${serviceName}/start`);
+      await loadServices();
+    } catch (err) {
+      setError(err.message);
+    }
+    setServiceActionLoading(null);
+  };
+
+  const handleStopService = async (serviceName) => {
+    setServiceActionLoading(serviceName);
+    setError(null);
+    try {
+      await api.post(`/features/${featureName}/wt/services/${serviceName}/stop`);
+      await loadServices();
+    } catch (err) {
+      setError(err.message);
+    }
+    setServiceActionLoading(null);
+  };
+
+  const handleStartAllServices = async () => {
     setServicesLoading(true);
     setError(null);
-    setServicesMessage(null);
     try {
       await api.post(`/features/${featureName}/wt/services/start`);
-      setServicesMessage('Services started');
-      setTimeout(() => setServicesMessage(null), 3000);
+      await loadServices();
     } catch (err) {
       setError(err.message);
     }
     setServicesLoading(false);
   };
 
-  const handleStopServices = async () => {
+  const handleStopAllServices = async () => {
     setServicesLoading(true);
     setError(null);
-    setServicesMessage(null);
     try {
       await api.post(`/features/${featureName}/wt/services/stop`);
-      setServicesMessage('Services stopped');
-      setTimeout(() => setServicesMessage(null), 3000);
+      await loadServices();
     } catch (err) {
       setError(err.message);
     }
     setServicesLoading(false);
   };
 
+  const handleOpenServiceShell = async (serviceName) => {
+    if (!terminalReady) {
+      try {
+        await loadXtermScripts();
+        setTerminalReady(true);
+      } catch {
+        setError('Failed to load terminal scripts');
+        return;
+      }
+    }
+    setShowTerminal(false);
+    setServiceTerminal({ service: serviceName });
+  };
+
   if (loading) {
     return React.createElement('div', { className: 'bg-aia-card border border-aia-border rounded p-4' },
       React.createElement('p', { className: 'text-slate-500 text-sm' }, 'Loading worktrunk status...')
@@ -140,9 +199,14 @@ export function WorktrunkPanel({ featureName }) {
   }
 
   // Active worktree state
-  // F8: Use wss:// for HTTPS, ws:// for HTTP
   const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
   const wsUrl = `${wsProtocol}//${window.location.host}/api/terminal?cwd=${encodeURIComponent(wtStatus.path)}`;
+  const serviceWsUrl = serviceTerminal
+    ? `${wsProtocol}//${window.location.host}/api/terminal/compose?service=${encodeURIComponent(serviceTerminal.service)}&cwd=${encodeURIComponent(wtStatus.path)}`
+    : null;
+
+  const dockerAvailable = wtStatus.docker?.available;
+  const hasComposeFile = wtStatus.docker?.hasComposeFile;
 
   return React.createElement('div', { className: 'bg-slate-900 border border-orange-500/30 rounded p-4 space-y-4' },
     // Header
@@ -166,29 +230,115 @@ export function WorktrunkPanel({ featureName }) {
       React.createElement('p', { className: 'text-sm text-slate-400 font-mono truncate', title: wtStatus.path }, wtStatus.path),
     ),
 
-    // Actions
+    // Terminal button
     React.createElement('div', { className: 'flex flex-wrap gap-2' },
       React.createElement('button', {
         onClick: showTerminal ? () => setShowTerminal(false) : handleOpenTerminal,
         className: 'bg-slate-700 text-slate-300 border border-slate-600 rounded px-3 py-1.5 text-xs hover:bg-slate-600',
       }, showTerminal ? 'Hide Terminal' : 'Open Terminal'),
+    ),
 
-      // Docker services buttons (only if services exist)
-      wtStatus.hasServices && React.createElement(React.Fragment, null,
-        React.createElement('button', {
-          onClick: handleStartServices,
-          disabled: servicesLoading,
-          className: 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 rounded px-3 py-1.5 text-xs hover:bg-emerald-500/30 disabled:opacity-40',
-        }, servicesLoading ? '...' : 'Start Services'),
-        React.createElement('button', {
-          onClick: handleStopServices,
+    // Docker section
+    React.createElement('div', { className: 'border-t border-slate-700 pt-4 space-y-3' },
+      // Docker status header
+      React.createElement('div', { className: 'flex items-center justify-between' },
+        React.createElement('div', { className: 'flex items-center gap-2' },
+          React.createElement('span', { className: 'text-cyan-400 font-medium text-sm' }, 'Docker'),
+          dockerAvailable
+            ? React.createElement('span', { className: 'bg-emerald-500/20 text-emerald-400 text-xs px-2 py-0.5 rounded' }, 'running')
+            : React.createElement('span', { className: 'bg-red-500/20 text-red-400 text-xs px-2 py-0.5 rounded' }, 'not running'),
+        ),
+        hasComposeFile && dockerAvailable && React.createElement('button', {
+          onClick: loadServices,
           disabled: servicesLoading,
-          className: 'bg-red-500/20 text-red-400 border border-red-500/30 rounded px-3 py-1.5 text-xs hover:bg-red-500/30 disabled:opacity-40',
-        }, servicesLoading ? '...' : 'Stop Services'),
+          className: 'text-slate-500 hover:text-slate-300 text-xs',
+        }, servicesLoading ? '...' : 'Refresh'),
+      ),
+
+      // No Docker available
+      !dockerAvailable && React.createElement('p', { className: 'text-slate-500 text-xs' },
+        'Docker daemon is not running. Start Docker to manage services.'
+      ),
+
+      // Docker available but no compose file
+      dockerAvailable && !hasComposeFile && React.createElement('p', { className: 'text-slate-500 text-xs' },
+        'No docker-compose.wt.yml found in worktree. Create one to manage services.'
+      ),
+
+      // Services list
+      dockerAvailable && hasComposeFile && services.length > 0 && React.createElement('div', { className: 'space-y-2' },
+        // Start All / Stop All buttons
+        React.createElement('div', { className: 'flex gap-2' },
+          React.createElement('button', {
+            onClick: handleStartAllServices,
+            disabled: servicesLoading,
+            className: 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 rounded px-3 py-1 text-xs hover:bg-emerald-500/30 disabled:opacity-40',
+          }, servicesLoading ? '...' : 'Start All'),
+          React.createElement('button', {
+            onClick: handleStopAllServices,
+            disabled: servicesLoading,
+            className: 'bg-red-500/20 text-red-400 border border-red-500/30 rounded px-3 py-1 text-xs hover:bg-red-500/30 disabled:opacity-40',
+          }, servicesLoading ? '...' : 'Stop All'),
+        ),
+
+        // Services
+        React.createElement('div', { className: 'space-y-1' },
+          ...services.map(svc => {
+            const isRunning = svc.state === 'running';
+            const isLoading = serviceActionLoading === svc.name;
+
+            return React.createElement('div', {
+              key: svc.name,
+              className: 'flex items-center justify-between bg-slate-800 rounded px-3 py-2',
+            },
+              React.createElement('div', { className: 'flex items-center gap-2 flex-wrap' },
+                React.createElement('span', {
+                  className: `w-2 h-2 rounded-full ${isRunning ? 'bg-emerald-400' : 'bg-slate-500'}`,
+                  title: svc.state,
+                }),
+                React.createElement('span', { className: 'text-sm text-slate-300 font-mono' }, svc.name),
+                svc.health && React.createElement('span', {
+                  className: `text-xs px-1.5 py-0.5 rounded ${svc.health === 'healthy' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-yellow-500/20 text-yellow-400'}`,
+                }, svc.health),
+                // Display ports
+                svc.ports && svc.ports.length > 0 && React.createElement('span', {
+                  className: 'text-xs text-cyan-500 font-mono',
+                }, svc.ports.map(p => `:${p.published}`).join(' ')),
+              ),
+              React.createElement('div', { className: 'flex gap-2' },
+                isRunning && React.createElement('button', {
+                  onClick: () => handleOpenServiceShell(svc.name),
+                  className: 'text-cyan-400 hover:text-cyan-300 text-xs',
+                }, 'Shell'),
+                isRunning
+                  ? React.createElement('button', {
+                      onClick: () => handleStopService(svc.name),
+                      disabled: isLoading,
+                      className: 'text-red-400 hover:text-red-300 text-xs disabled:opacity-40',
+                    }, isLoading ? '...' : 'Stop')
+                  : React.createElement('button', {
+                      onClick: () => handleStartService(svc.name),
+                      disabled: isLoading,
+                      className: 'text-emerald-400 hover:text-emerald-300 text-xs disabled:opacity-40',
+                    }, isLoading ? '...' : 'Start'),
+              ),
+            );
+          }),
+        ),
+      ),
+
+      // Loading services
+      dockerAvailable && hasComposeFile && servicesLoading && services.length === 0 && React.createElement('p', { className: 'text-slate-500 text-xs' },
+        'Loading services...'
+      ),
+
+      // No services defined
+      dockerAvailable && hasComposeFile && !servicesLoading && services.length === 0 && React.createElement('p', { className: 'text-slate-500 text-xs' },
+        'No services defined in docker-compose.wt.yml'
       ),
     ),
 
-    // Terminal
+    // Worktree Terminal
     showTerminal && terminalReady && React.createElement('div', { className: 'mt-4' },
       React.createElement(Terminal, {
         wsUrl,
@@ -196,8 +346,20 @@ export function WorktrunkPanel({ featureName }) {
       }),
     ),
 
-    // F9: Services feedback message
-    servicesMessage && React.createElement('p', { className: 'text-emerald-400 text-xs' }, servicesMessage),
+    // Service Terminal
+    serviceTerminal && terminalReady && React.createElement('div', { className: 'mt-4' },
+      React.createElement('div', { className: 'flex items-center justify-between mb-2' },
+        React.createElement('span', { className: 'text-xs text-cyan-400' }, `Shell: ${serviceTerminal.service}`),
+        React.createElement('button', {
+          onClick: () => setServiceTerminal(null),
+          className: 'text-slate-500 hover:text-slate-300 text-xs',
+        }, 'Close'),
+      ),
+      React.createElement(Terminal, {
+        wsUrl: serviceWsUrl,
+        onClose: () => setServiceTerminal(null),
+      }),
+    ),
 
     // Error
     error && React.createElement('p', { className: 'text-red-400 text-xs' }, error),

package/src/ui/public/index.html

@@ -35,6 +35,19 @@
     .step-in-progress { @apply bg-amber-500/20 text-amber-400 border-amber-500/30; }
     .step-error { @apply bg-red-500/20 text-red-400 border-red-500/30; }
     textarea { tab-size: 2; }
+
+    /* Type badges */
+    .type-feature { @apply bg-emerald-500/20 text-emerald-400 border-emerald-500/30; }
+    .type-bug { @apply bg-red-500/20 text-red-400 border-red-500/30; }
+
+    /* App chips */
+    .app-chip { @apply bg-slate-700/50 text-slate-300 border border-slate-600 px-2 py-0.5 text-xs rounded-full; }
+    .app-chip-selected { @apply bg-aia-accent/20 text-aia-accent border border-aia-accent/30 px-2 py-0.5 text-xs rounded-full; }
+
+    /* Modal animations */
+    .modal-step-enter { opacity: 0; transform: translateX(20px); }
+    .modal-step-active { opacity: 1; transform: translateX(0); transition: all 0.2s ease-out; }
+    .modal-step-exit { opacity: 0; transform: translateX(-20px); }
   </style>
 </head>
 <body class="bg-aia-bg text-slate-200 min-h-screen">

package/src/ui/public/main.js

@@ -3,6 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { Dashboard } from '/components/dashboard.js';
 import { FeatureDetail } from '/components/feature-detail.js';
 import { ConfigView } from '/components/config-view.js';
+import { TestQuickView } from '/components/test-quick.js';
 
 // --- API client ---
 export const api = {
@@ -116,6 +117,7 @@ function parseRoute(hash) {
     return { page: 'feature', name: decodeURIComponent(hash.slice('#/features/'.length)) };
   }
   if (hash === '#/config') return { page: 'config' };
+  if (hash === '#/test-quick') return { page: 'test-quick' };
   return { page: 'dashboard' };
 }
 
@@ -141,12 +143,14 @@ function App() {
         className: 'bg-violet-500/20 text-violet-300 border border-violet-500/30 px-2 py-0.5 rounded text-xs font-medium',
       }, projectName),
       React.createElement('a', { href: '#/', className: 'text-slate-400 hover:text-slate-200 text-sm' }, 'Features'),
+      React.createElement('a', { href: '#/test-quick', className: 'text-slate-400 hover:text-slate-200 text-sm' }, 'Test Quick'),
       React.createElement('a', { href: '#/config', className: 'text-slate-400 hover:text-slate-200 text-sm' }, 'Config'),
     ),
     React.createElement('main', { className: 'max-w-6xl mx-auto p-6' },
       page === 'dashboard' ? React.createElement(Dashboard) :
       page === 'feature' ? React.createElement(FeatureDetail, { name }) :
-      page === 'config' ? React.createElement(ConfigView) : null
+      page === 'config' ? React.createElement(ConfigView) :
+      page === 'test-quick' ? React.createElement(TestQuickView) : null
     )
   );
 }