From 595548db950eca303a7d73ca09f31895d291534f Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Sat, 24 Jan 2026 15:50:43 +0000
Subject: feat(frontend): Add Templates page for managing contract templates

- Add NavStrip component for top navigation between pages
- Create Templates page with template card grid layout
- Create TemplateEditor component for editing phase deliverables
- Add navigation state management in stores
- Implement three built-in templates:
  - Simple: Plan phase (Plan deliverable), Execute phase (PR deliverable)
  - Specification: Research, Specify, Plan, Execute, Review phases with deliverables
  - Execute: Single execute phase with no deliverables
- Support for creating custom templates with configurable phases/deliverables
- Templates are persisted to localStorage
- Add comprehensive CSS styling matching existing design patterns

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

[WIP] Heartbeat checkpoint - 2026-01-24 16:13:00 UTC

[WIP] Heartbeat checkpoint - 2026-01-24 16:14:29 UTC
---
 frontend/src/components/VNInterface.tsx | 40 ++++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

(limited to 'frontend/src/components/VNInterface.tsx')

diff --git a/frontend/src/components/VNInterface.tsx b/frontend/src/components/VNInterface.tsx
index be71d27..bdc7db0 100644
--- a/frontend/src/components/VNInterface.tsx
+++ b/frontend/src/components/VNInterface.tsx
@@ -8,15 +8,24 @@ import {
   showSettingsModalStore,
   isVisibleStore,
   yenBalanceStore,
+  currentPageStore,
   toggleStandby,
   toggleShowChoices,
-  updateTime
+  updateTime,
+  navigateTo
 } from '../stores'
+import { NavStrip } from './NavStrip'
+import { TemplatesPage } from '../pages/templates'
 
 interface VNInterfaceProps {
   onLogout: () => void
 }
 
+const NAV_ITEMS = [
+  { id: 'main', label: 'Main', icon: '>' },
+  { id: 'templates', label: 'Templates', icon: '>' }
+]
+
 export function VNInterface({ onLogout }: VNInterfaceProps) {
   const isStandby = useStore(isStandbyStore)
   const currentTime = useStore(currentTimeStore)
@@ -25,6 +34,7 @@ export function VNInterface({ onLogout }: VNInterfaceProps) {
   const showSettingsModal = useStore(showSettingsModalStore)
   const isVisible = useStore(isVisibleStore)
   const yenBalance = useStore(yenBalanceStore)
+  const currentPage = useStore(currentPageStore)
 
   // Fade in effect on mount
   useEffect(() => {
@@ -45,12 +55,36 @@ export function VNInterface({ onLogout }: VNInterfaceProps) {
     return () => clearInterval(timer)
   }, [])
 
+  // Show Templates page if on templates route
+  if (currentPage === 'templates') {
+    return (
+      <div className={`vn-interface ${isVisible ? 'fade-in' : 'fade-out'}`}>
+        <div className="vn-background">
+          <div className="background-overlay"></div>
+        </div>
+        <NavStrip
+          items={NAV_ITEMS}
+          activeId={currentPage}
+          onSelect={(id) => navigateTo(id as 'main' | 'templates')}
+        />
+        <TemplatesPage onClose={() => navigateTo('main')} />
+      </div>
+    )
+  }
+
   return (
     <div className={`vn-interface ${isVisible ? 'fade-in' : 'fade-out'}`}>
+      {/* Navigation Strip */}
+      <NavStrip
+        items={NAV_ITEMS}
+        activeId={currentPage}
+        onSelect={(id) => navigateTo(id as 'main' | 'templates')}
+      />
+
       {/* Background */}
       <div className="vn-background">
-        <img 
-          src="/__gaogao__56242cbde8f18ac64522e410bad04e68_waifu2x_art_noise2.png" 
+        <img
+          src="/__gaogao__56242cbde8f18ac64522e410bad04e68_waifu2x_art_noise2.png"
           alt="Background image"
           className="background-image"
         />
-- 
cgit v1.2.3