@openspecui/web 0.9.0

package/src/entry-client.tsx

@@ -0,0 +1,47 @@
+/**
+ * Client-side entry point with hydration support
+ *
+ * This file handles both:
+ * 1. Fresh render (SPA mode) - when no pre-rendered HTML exists
+ * 2. Hydration (SSG mode) - when HTML was pre-rendered on server
+ */
+import { hydrateRoot, createRoot } from 'react-dom/client'
+import { App } from './App'
+import { detectStaticMode, setStaticMode } from './lib/static-mode'
+
+// Check if we have pre-rendered content (SSG mode)
+const hasPrerenderedContent = () => {
+  const root = document.getElementById('root')
+  // If root has children, it was pre-rendered
+  return root && root.innerHTML.trim().length > 0
+}
+
+// Check if we're in static mode via window flag (set by SSG)
+const isSSGMode = () => {
+  return typeof window !== 'undefined' && (window as any).__OPENSPEC_STATIC_MODE__ === true
+}
+
+async function main() {
+  const rootElement = document.getElementById('root')!
+
+  // Detect static mode
+  const isStatic = isSSGMode() || await detectStaticMode()
+  setStaticMode(isStatic)
+
+  if (isStatic) {
+    console.log('[OpenSpec UI] Running in static mode')
+  }
+
+  // Choose render method based on whether we have pre-rendered content
+  if (hasPrerenderedContent() && isStatic) {
+    // Hydration mode - attach event listeners to existing HTML
+    console.log('[OpenSpec UI] Hydrating pre-rendered content')
+    hydrateRoot(rootElement, <App />)
+  } else {
+    // Fresh render mode - render from scratch
+    console.log('[OpenSpec UI] Fresh render')
+    createRoot(rootElement).render(<App />)
+  }
+}
+
+main()

package/src/index.css

@@ -0,0 +1,481 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0.6489 0.237 26.9728);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.968 0.211 109.7692);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.9551 0 0);
+  --muted-foreground: oklch(0.3211 0 0);
+  --accent: oklch(0.5635 0.2408 260.8178);
+  --accent-foreground: oklch(1 0 0);
+  --destructive: oklch(0 0 0);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0 0 0);
+  --input: oklch(0 0 0);
+  --ring: oklch(0.6489 0.237 26.9728);
+  --chart-1: oklch(0.6489 0.237 26.9728);
+  --chart-2: oklch(0.968 0.211 109.7692);
+  --chart-3: oklch(0.5635 0.2408 260.8178);
+  --chart-4: oklch(0.7323 0.2492 142.4953);
+  --chart-5: oklch(0.5931 0.2726 328.3634);
+  --sidebar: oklch(0.9551 0 0);
+  --sidebar-foreground: oklch(0 0 0);
+  --sidebar-primary: oklch(0.6489 0.237 26.9728);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.5635 0.2408 260.8178);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-border: oklch(0 0 0);
+  --sidebar-ring: oklch(0.6489 0.237 26.9728);
+  --font-sans: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  --font-nav: 'Share Tech Mono', 'JetBrains Mono', SFMono-Regular, monospace;
+  --radius: 0px;
+  --shadow-x: 4px;
+  --shadow-y: 4px;
+  --shadow-blur: 0px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 1;
+  --shadow-color: hsl(0 0% 0%);
+  --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
+  --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
+  --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
+  --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
+  --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 2px 4px -1px hsl(0 0% 0% / 1);
+  --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 4px 6px -1px hsl(0 0% 0% / 1);
+  --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 8px 10px -1px hsl(0 0% 0% / 1);
+  --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.5);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+}
+
+.dark {
+  --background: oklch(0 0 0);
+  --foreground: oklch(1 0 0);
+  --card: oklch(0.3211 0 0);
+  --card-foreground: oklch(1 0 0);
+  --popover: oklch(0.3211 0 0);
+  --popover-foreground: oklch(1 0 0);
+  --primary: oklch(0.7044 0.1872 23.1858);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.9691 0.2005 109.6228);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.2178 0 0);
+  --muted-foreground: oklch(0.8452 0 0);
+  --accent: oklch(0.6755 0.1765 252.2592);
+  --accent-foreground: oklch(0 0 0);
+  --destructive: oklch(1 0 0);
+  --destructive-foreground: oklch(0 0 0);
+  --border: oklch(1 0 0);
+  --input: oklch(1 0 0);
+  --ring: oklch(0.7044 0.1872 23.1858);
+  --chart-1: oklch(0.7044 0.1872 23.1858);
+  --chart-2: oklch(0.9691 0.2005 109.6228);
+  --chart-3: oklch(0.6755 0.1765 252.2592);
+  --chart-4: oklch(0.7395 0.2268 142.8504);
+  --chart-5: oklch(0.6131 0.2458 328.0714);
+  --sidebar: oklch(0 0 0);
+  --sidebar-foreground: oklch(1 0 0);
+  --sidebar-primary: oklch(0.7044 0.1872 23.1858);
+  --sidebar-primary-foreground: oklch(0 0 0);
+  --sidebar-accent: oklch(0.6755 0.1765 252.2592);
+  --sidebar-accent-foreground: oklch(0 0 0);
+  --sidebar-border: oklch(1 0 0);
+  --sidebar-ring: oklch(0.7044 0.1872 23.1858);
+  --font-sans: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  --font-nav: 'Share Tech Mono', 'JetBrains Mono', SFMono-Regular, monospace;
+  --radius: 0px;
+  --shadow-x: 4px;
+  --shadow-y: 4px;
+  --shadow-blur: 0px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 1;
+  --shadow-color: hsl(0 0% 0%);
+  --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
+  --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
+  --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
+  --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
+  --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 2px 4px -1px hsl(0 0% 0% / 1);
+  --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 4px 6px -1px hsl(0 0% 0% / 1);
+  --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 8px 10px -1px hsl(0 0% 0% / 1);
+  --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.5);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+  --font-nav: var(--font-nav);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+    corner-shape: bevel;
+  }
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-family: var(--font-mono);
+  }
+
+  .font-nav {
+    font-family: var(--font-nav);
+  }
+  button {
+    cursor: pointer;
+  }
+}
+
+.view-transition-route {
+  view-transition-name: route;
+  contain: paint;
+  position: relative;
+}
+
+.route-loading {
+  view-transition-name: none;
+}
+
+html[data-vt-running] .route-loading {
+  display: none !important;
+}
+
+@keyframes route-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes route-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+}
+
+::view-transition-old(route) {
+  animation: route-fade-out 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+::view-transition-new(route) {
+  animation: route-fade-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(route),
+  ::view-transition-new(route) {
+    animation: none;
+  }
+}
+
+/* Custom scrollbar */
+.scrollbar-thin {
+  scrollbar-width: thin;
+}
+.scrollbar-track-transparent {
+  scrollbar-color: color-mix(in srgb, currentColor, transparent 70%) transparent;
+}
+.scrollbar-none {
+  scrollbar-width: none;
+}
+
+/* Markdown content styling */
+@layer base {
+  .markdown-content {
+    color: var(--foreground);
+    line-height: 1.7;
+  }
+  .markdown-content h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+  }
+  .markdown-content h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-top: 1.25rem;
+    margin-bottom: 0.5rem;
+  }
+  .markdown-content h3 {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+  }
+  .markdown-content h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-top: 0.85rem;
+    margin-bottom: 0.4rem;
+  }
+  .markdown-content h5 {
+    font-size: 0.95rem;
+    font-weight: 600;
+    margin-top: 0.75rem;
+    margin-bottom: 0.35rem;
+  }
+  .markdown-content h6 {
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    color: var(--muted-foreground);
+    margin-top: 0.6rem;
+    margin-bottom: 0.3rem;
+  }
+  :where(.markdown-content, .markdown-section) > :first-child:is(h1, h2, h3, h4, h5, h6) {
+    margin-top: 0;
+  }
+  .markdown-content p {
+    margin-bottom: 0.75rem;
+  }
+  .markdown-content ul,
+  .markdown-content ol {
+    margin-bottom: 0.75rem;
+    padding-left: 1.5rem;
+  }
+  .markdown-content ul {
+    list-style-type: disc;
+  }
+  .markdown-content ol {
+    list-style-type: decimal;
+  }
+  .markdown-content li {
+    margin-bottom: 0.25rem;
+  }
+  .markdown-content a {
+    color: var(--primary);
+    text-decoration: underline;
+  }
+  .markdown-content a:hover {
+    opacity: 0.8;
+  }
+  .markdown-content blockquote {
+    border-left: 3px solid var(--border);
+    padding-left: 1rem;
+    margin: 1rem 0;
+    color: var(--muted-foreground);
+  }
+  .markdown-content hr {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 1.5rem 0;
+  }
+  .markdown-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+  }
+  .markdown-content th,
+  .markdown-content td {
+    border: 1px solid var(--border);
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+  }
+  .markdown-content th {
+    background: var(--muted);
+    font-weight: 600;
+  }
+  .markdown-content strong {
+    font-weight: 600;
+  }
+}
+
+/* Shiki dual theme support */
+.shiki-wrapper {
+  border: 1px solid var(--border);
+}
+.shiki,
+.shiki span {
+  color: var(--shiki-light) !important;
+  background-color: var(--shiki-light-bg) !important;
+}
+.dark .shiki,
+.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+}
+
+/* Terminal line effects */
+.terminal-shimmer {
+  background-image: linear-gradient(90deg, #a1a1aa 0%, #fafafa 50%, #a1a1aa 100%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: terminal-shimmer 1.8s linear infinite;
+}
+
+@keyframes terminal-shimmer {
+  0% {
+    background-position: -120% 0;
+  }
+  100% {
+    background-position: 120% 0;
+  }
+}
+
+/* App layout - responsive with container queries */
+.app-layout {
+  display: flex;
+  flex-direction: column;
+}
+.app-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+.desktop-sidebar,
+.desktop-status {
+  display: none;
+}
+.mobile-header,
+.mobile-tabbar {
+  display: flex;
+}
+.main-content {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 1rem;
+}
+
+/* Desktop: sidebar layout (container width >= 768px) */
+@container app (min-width: 768px) {
+  .app-layout {
+    flex-direction: row;
+  }
+  .app-body {
+    min-width: 0;
+  }
+  .desktop-sidebar,
+  .desktop-status {
+    display: flex;
+  }
+  .mobile-header,
+  .mobile-tabbar {
+    display: none;
+  }
+  .main-content {
+    padding: 1.5rem;
+  }
+}
+
+/* Animation utilities */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes slide-in-from-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+.animate-in {
+  animation-duration: 200ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+.fade-in {
+  animation-name: fade-in;
+}
+.slide-in-from-left {
+  animation-name: slide-in-from-left;
+}
+.duration-200 {
+  animation-duration: 200ms;
+}
+
+/* Marquee animation for long paths */
+@keyframes marquee-scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(calc(-100% - var(--marquee-gap, 20px)));
+  }
+}
+.animate-marquee {
+  animation: marquee-scroll var(--marquee-duration, 10s) linear infinite;
+}
+.animate-marquee::after {
+  content: attr(data-content);
+  position: absolute;
+  left: calc(100% + var(--marquee-gap, 20px));
+  top: 0;
+  white-space: nowrap;
+}

package/src/lib/api-config.ts

@@ -0,0 +1,72 @@
+/**
+ * API configuration with support for URL parameters
+ *
+ * Supports:
+ * - Same-origin requests (production mode)
+ * - URL parameter override: ?api=http://localhost:3100
+ */
+
+/**
+ * Check if running in browser environment
+ */
+function isBrowser(): boolean {
+  return typeof window !== 'undefined' && typeof window.location !== 'undefined'
+}
+
+/**
+ * Get API base URL from URL search params or use same-origin
+ */
+export function getApiBaseUrl(): string {
+  if (!isBrowser()) {
+    return '' // SSR: return empty string
+  }
+
+  const params = new URLSearchParams(window.location.search)
+  const apiUrl = params.get('api')
+
+  if (apiUrl) {
+    // Remove trailing slash if present
+    return apiUrl.replace(/\/$/, '')
+  }
+
+  // Default: same-origin (works in production when served from CLI)
+  return ''
+}
+
+/**
+ * Get WebSocket URL based on API base URL
+ */
+export function getWsUrl(): string {
+  if (!isBrowser()) {
+    return '' // SSR: return empty string
+  }
+
+  const baseUrl = getApiBaseUrl()
+
+  if (baseUrl) {
+    // Convert http(s) to ws(s)
+    const url = new URL(baseUrl)
+    const wsProtocol = url.protocol === 'https:' ? 'wss:' : 'ws:'
+    return `${wsProtocol}//${url.host}/trpc`
+  }
+
+  // Same-origin WebSocket
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+  return `${protocol}//${window.location.host}/trpc`
+}
+
+/**
+ * Get HTTP URL for tRPC
+ */
+export function getTrpcUrl(): string {
+  const baseUrl = getApiBaseUrl()
+  return baseUrl ? `${baseUrl}/trpc` : '/trpc'
+}
+
+/**
+ * Get health check URL
+ */
+export function getHealthUrl(): string {
+  const baseUrl = getApiBaseUrl()
+  return baseUrl ? `${baseUrl}/api/health` : '/api/health'
+}

package/src/lib/archive-modal-context.tsx

@@ -0,0 +1,45 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react'
+
+interface ArchiveModalState {
+  open: boolean
+  changeId: string
+  changeName: string
+}
+
+interface ArchiveModalContextValue {
+  state: ArchiveModalState
+  openArchiveModal: (changeId: string, changeName: string) => void
+  closeArchiveModal: () => void
+}
+
+const ArchiveModalContext = createContext<ArchiveModalContextValue | null>(null)
+
+export function ArchiveModalProvider({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<ArchiveModalState>({
+    open: false,
+    changeId: '',
+    changeName: '',
+  })
+
+  const openArchiveModal = useCallback((changeId: string, changeName: string) => {
+    setState({ open: true, changeId, changeName })
+  }, [])
+
+  const closeArchiveModal = useCallback(() => {
+    setState((prev) => ({ ...prev, open: false }))
+  }, [])
+
+  return (
+    <ArchiveModalContext.Provider value={{ state, openArchiveModal, closeArchiveModal }}>
+      {children}
+    </ArchiveModalContext.Provider>
+  )
+}
+
+export function useArchiveModal() {
+  const context = useContext(ArchiveModalContext)
+  if (!context) {
+    throw new Error('useArchiveModal must be used within ArchiveModalProvider')
+  }
+  return context
+}