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

1 files changed, 663 insertions, 0 deletions

diff --git a/frontend/src/styles/pc98.css b/frontend/src/styles/pc98.css
index 4dcf15e..f4747f5 100644
--- a/frontend/src/styles/pc98.css
+++ b/frontend/src/styles/pc98.css
@@ -4621,3 +4621,666 @@ button:focus-visible {
     display: none;
   }
 }
+
+/* ======================================
+   Navigation Strip
+   ====================================== */
+.nav-strip {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background: rgba(0, 0, 0, 0.9);
+  border-bottom: 1px solid rgba(102, 204, 255, 0.3);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 8px;
+  z-index: 1000;
+  backdrop-filter: blur(10px);
+}
+
+.nav-strip-item {
+  appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  color: rgba(255, 255, 255, 0.6);
+  font-family: 'MS Gothic', monospace;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 6px 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.2s ease;
+  letter-spacing: 0.5px;
+}
+
+.nav-strip-item:hover {
+  color: rgba(255, 255, 255, 0.9);
+  border-color: rgba(102, 204, 255, 0.3);
+  background: rgba(102, 204, 255, 0.05);
+}
+
+.nav-strip-item.active {
+  color: #66ccff;
+  border-color: rgba(102, 204, 255, 0.5);
+  background: rgba(102, 204, 255, 0.1);
+}
+
+.nav-icon {
+  font-size: 10px;
+  opacity: 0.7;
+}
+
+.nav-label {
+  text-transform: uppercase;
+}
+
+/* Adjust VN interface content for nav strip */
+.vn-interface {
+  padding-top: 40px;
+}
+
+.floating-info-panel {
+  top: 56px;
+}
+
+/* ======================================
+   Templates Page
+   ====================================== */
+.templates-page {
+  position: fixed;
+  top: 40px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 20, 0.95);
+  overflow-y: auto;
+  padding: 24px;
+  z-index: 100;
+}
+
+.templates-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 32px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid rgba(102, 204, 255, 0.2);
+}
+
+.templates-header-left {
+  flex: 1;
+}
+
+.templates-header-right {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.templates-title {
+  font-family: 'MS Gothic', monospace;
+  font-size: 24px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0 0 8px 0;
+  letter-spacing: 1px;
+}
+
+.templates-subtitle {
+  font-family: 'MS Gothic', monospace;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.5);
+  margin: 0;
+}
+
+.templates-btn {
+  appearance: none;
+  font-family: 'MS Gothic', monospace;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 8px 16px;
+  cursor: pointer;
+  border: 1px solid rgba(102, 204, 255, 0.5);
+  background: rgba(102, 204, 255, 0.1);
+  color: #66ccff;
+  transition: all 0.2s ease;
+  letter-spacing: 0.5px;
+}
+
+.templates-btn:hover {
+  background: rgba(102, 204, 255, 0.2);
+  border-color: #66ccff;
+}
+
+.templates-btn.primary {
+  background: rgba(102, 204, 255, 0.2);
+  border-color: #66ccff;
+}
+
+.templates-btn.primary:hover {
+  background: rgba(102, 204, 255, 0.3);
+}
+
+.templates-btn.secondary {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.templates-btn.secondary:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.4);
+  color: #ffffff;
+}
+
+.templates-close-btn {
+  appearance: none;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.7);
+  width: 32px;
+  height: 32px;
+  font-size: 18px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.templates-close-btn:hover {
+  background: rgba(255, 100, 100, 0.1);
+  border-color: rgba(255, 100, 100, 0.5);
+  color: #ff6464;
+}
+
+/* New Template Form */
+.new-template-form {
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(102, 204, 255, 0.3);
+  padding: 16px;
+  margin-bottom: 24px;
+}
+
+.form-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.form-input {
+  flex: 1;
+  appearance: none;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(102, 204, 255, 0.3);
+  color: #ffffff;
+  font-family: 'MS Gothic', monospace;
+  font-size: 13px;
+  padding: 8px 12px;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #66ccff;
+  background: rgba(102, 204, 255, 0.05);
+}
+
+.form-input::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+/* Templates Grid */
+.templates-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+}
+
+.template-card {
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(102, 204, 255, 0.2);
+  padding: 20px;
+  transition: all 0.2s ease;
+}
+
+.template-card:hover {
+  border-color: rgba(102, 204, 255, 0.4);
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.template-card.custom {
+  border-color: rgba(255, 204, 102, 0.3);
+}
+
+.template-card.custom:hover {
+  border-color: rgba(255, 204, 102, 0.5);
+}
+
+.template-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.template-card-title {
+  font-family: 'MS Gothic', monospace;
+  font-size: 16px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  letter-spacing: 0.5px;
+}
+
+.template-badge {
+  font-family: 'MS Gothic', monospace;
+  font-size: 10px;
+  font-weight: bold;
+  padding: 3px 8px;
+  background: rgba(102, 204, 255, 0.15);
+  border: 1px solid rgba(102, 204, 255, 0.3);
+  color: #66ccff;
+  letter-spacing: 0.5px;
+}
+
+.template-badge.custom {
+  background: rgba(255, 204, 102, 0.15);
+  border-color: rgba(255, 204, 102, 0.3);
+  color: #ffcc66;
+}
+
+.template-card-description {
+  font-family: 'MS Gothic', monospace;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+  margin: 0 0 16px 0;
+  line-height: 1.5;
+}
+
+/* Template Phases */
+.template-phases {
+  margin-bottom: 16px;
+}
+
+.template-phase {
+  display: flex;
+  gap: 12px;
+  padding: 8px 0;
+}
+
+.phase-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 12px;
+}
+
+.phase-dot {
+  width: 8px;
+  height: 8px;
+  background: #66ccff;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.phase-line {
+  width: 2px;
+  flex: 1;
+  background: rgba(102, 204, 255, 0.3);
+  margin-top: 4px;
+}
+
+.phase-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.phase-name {
+  font-family: 'MS Gothic', monospace;
+  font-size: 13px;
+  font-weight: bold;
+  color: #ffffff;
+}
+
+.phase-deliverables {
+  font-family: 'MS Gothic', monospace;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+/* Template Card Actions */
+.template-card-actions {
+  display: flex;
+  gap: 8px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(102, 204, 255, 0.1);
+}
+
+.template-action-btn {
+  appearance: none;
+  font-family: 'MS Gothic', monospace;
+  font-size: 11px;
+  font-weight: bold;
+  padding: 6px 12px;
+  cursor: pointer;
+  border: 1px solid rgba(102, 204, 255, 0.3);
+  background: transparent;
+  color: #66ccff;
+  transition: all 0.2s ease;
+}
+
+.template-action-btn:hover {
+  background: rgba(102, 204, 255, 0.1);
+  border-color: #66ccff;
+}
+
+.template-action-btn.delete {
+  border-color: rgba(255, 100, 100, 0.3);
+  color: #ff6464;
+}
+
+.template-action-btn.delete:hover {
+  background: rgba(255, 100, 100, 0.1);
+  border-color: #ff6464;
+}
+
+/* ======================================
+   Template Editor
+   ====================================== */
+.template-editor {
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(102, 204, 255, 0.3);
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.template-editor-header {
+  padding: 20px;
+  border-bottom: 1px solid rgba(102, 204, 255, 0.2);
+}
+
+.template-editor-title {
+  font-family: 'MS Gothic', monospace;
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0 0 8px 0;
+}
+
+.template-editor-description {
+  font-family: 'MS Gothic', monospace;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+  margin: 0;
+}
+
+.template-editor-content {
+  padding: 20px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.phases-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.phase-card {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(102, 204, 255, 0.2);
+  padding: 16px;
+}
+
+.phase-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.phase-number {
+  width: 24px;
+  height: 24px;
+  background: rgba(102, 204, 255, 0.2);
+  border: 1px solid rgba(102, 204, 255, 0.4);
+  color: #66ccff;
+  font-family: 'MS Gothic', monospace;
+  font-size: 12px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.phase-name-input {
+  flex: 1;
+  appearance: none;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(102, 204, 255, 0.3);
+  color: #ffffff;
+  font-family: 'MS Gothic', monospace;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 8px 12px;
+}
+
+.phase-name-input:focus {
+  outline: none;
+  border-color: #66ccff;
+}
+
+.phase-remove-btn {
+  appearance: none;
+  background: transparent;
+  border: 1px solid rgba(255, 100, 100, 0.3);
+  color: #ff6464;
+  width: 24px;
+  height: 24px;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.phase-remove-btn:hover {
+  background: rgba(255, 100, 100, 0.1);
+  border-color: #ff6464;
+}
+
+.deliverables-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-left: 36px;
+}
+
+.no-deliverables {
+  font-family: 'MS Gothic', monospace;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.3);
+  font-style: italic;
+  padding: 8px 0;
+}
+
+.deliverable-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.deliverable-name-input {
+  flex: 1;
+  appearance: none;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+  font-family: 'MS Gothic', monospace;
+  font-size: 12px;
+  padding: 6px 10px;
+}
+
+.deliverable-name-input:focus {
+  outline: none;
+  border-color: rgba(102, 204, 255, 0.5);
+}
+
+.deliverable-remove-btn {
+  appearance: none;
+  background: transparent;
+  border: 1px solid rgba(255, 100, 100, 0.2);
+  color: rgba(255, 100, 100, 0.6);
+  width: 20px;
+  height: 20px;
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.deliverable-remove-btn:hover {
+  background: rgba(255, 100, 100, 0.1);
+  border-color: #ff6464;
+  color: #ff6464;
+}
+
+.add-deliverable-row {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.add-deliverable-input {
+  flex: 1;
+  appearance: none;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px dashed rgba(102, 204, 255, 0.2);
+  color: #ffffff;
+  font-family: 'MS Gothic', monospace;
+  font-size: 12px;
+  padding: 6px 10px;
+}
+
+.add-deliverable-input:focus {
+  outline: none;
+  border-style: solid;
+  border-color: rgba(102, 204, 255, 0.4);
+}
+
+.add-deliverable-input::placeholder {
+  color: rgba(255, 255, 255, 0.25);
+}
+
+.add-deliverable-btn {
+  appearance: none;
+  background: rgba(102, 204, 255, 0.1);
+  border: 1px solid rgba(102, 204, 255, 0.3);
+  color: #66ccff;
+  font-family: 'MS Gothic', monospace;
+  font-size: 11px;
+  font-weight: bold;
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.add-deliverable-btn:hover {
+  background: rgba(102, 204, 255, 0.2);
+  border-color: #66ccff;
+}
+
+.add-phase-btn {
+  appearance: none;
+  width: 100%;
+  background: rgba(102, 204, 255, 0.05);
+  border: 1px dashed rgba(102, 204, 255, 0.3);
+  color: #66ccff;
+  font-family: 'MS Gothic', monospace;
+  font-size: 13px;
+  font-weight: bold;
+  padding: 12px;
+  margin-top: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.add-phase-btn:hover {
+  background: rgba(102, 204, 255, 0.1);
+  border-style: solid;
+}
+
+.template-editor-footer {
+  padding: 16px 20px;
+  border-top: 1px solid rgba(102, 204, 255, 0.2);
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.template-editor-footer .modal-btn.primary {
+  background: rgba(102, 204, 255, 0.2);
+  border-color: #66ccff;
+  color: #66ccff;
+}
+
+.template-editor-footer .modal-btn.primary:hover {
+  background: rgba(102, 204, 255, 0.3);
+}
+
+/* Background overlay for templates page */
+.background-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(180deg, rgba(0, 0, 30, 0.95) 0%, rgba(0, 0, 50, 0.9) 100%);
+}
+
+/* Mobile responsive adjustments for templates */
+@media (max-width: 768px) {
+  .templates-page {
+    padding: 16px;
+  }
+
+  .templates-header {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .templates-header-right {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .templates-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .form-row {
+    flex-direction: column;
+  }
+
+  .form-input {
+    width: 100%;
+  }
+
+  .template-editor-content {
+    max-height: 50vh;
+  }
+
+  .deliverables-list {
+    padding-left: 0;
+  }
+}