@openspecui/web 0.9.0 → 0.9.3

package/src/entry-client.tsx

@@ -1,47 +0,0 @@
-/**
- * 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

@@ -1,481 +0,0 @@
-@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

@@ -1,72 +0,0 @@
-/**
- * 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

@@ -1,45 +0,0 @@
-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
-}