@miketromba/issy-app 0.1.0

package/README.md

@@ -0,0 +1,17 @@
+# @miketromba/issy-app
+
+Local web UI + API server for issy.
+
+## Run
+
+```bash
+bun --cwd packages/ui run dev
+```
+
+The server reads and writes issues from `.issues/` in your current working directory.
+
+## Environment Variables
+
+- `ISSUES_ROOT`: root directory to look for `.issues` (default: cwd)
+- `ISSUES_DIR`: explicit issues directory (overrides `ISSUES_ROOT`)
+- `ISSUES_PORT`: server port for the UI/API

package/bunfig.toml

@@ -0,0 +1,2 @@
+[serve.static]
+plugins = ["bun-plugin-tailwind"]

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@miketromba/issy-app",
+  "version": "0.1.0",
+  "description": "Local web UI and API server for issy",
+  "type": "module",
+  "license": "MIT",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/miketromba/issy.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/miketromba/issy/issues"
+  },
+  "homepage": "https://github.com/miketromba/issy#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "bun --hot src/index.ts",
+    "start": "bun src/index.ts"
+  },
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "src",
+    "bunfig.toml"
+  ],
+  "dependencies": {
+    "@miketromba/issy-core": "^0.1.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "bun-plugin-tailwind": "^0.1.2",
+    "highlight.js": "^11.11.1",
+    "marked": "^17.0.1",
+    "react": "^19",
+    "react-dom": "^19",
+    "tailwindcss": "^4.1.11"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/bun": "latest"
+  }
+}

package/src/App.tsx

@@ -0,0 +1,332 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
+import { IssueList } from './components/IssueList'
+import { IssueDetail } from './components/IssueDetail'
+import { QueryHelpModal } from './components/QueryHelpModal'
+import { FilterBar } from './components/FilterBar'
+import { CreateIssueModal } from './components/CreateIssueModal'
+import { EditIssueModal } from './components/EditIssueModal'
+import { ConfirmModal } from './components/ConfirmModal'
+import type { Issue, IssueFrontmatter } from '@miketromba/issy-core'
+import { filterByQuery } from '@miketromba/issy-core'
+
+// Re-export types for components
+export type { Issue, IssueFrontmatter }
+
+interface FilterState {
+	query: string
+}
+
+const STORAGE_KEY = 'issy-state'
+
+function loadState(): { filters: FilterState; selectedIssueId: string | null } {
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY)
+		if (stored) {
+			const parsed = JSON.parse(stored)
+			// Migrate old filter format to new query format
+			if (parsed.filters && !parsed.filters.query) {
+				const oldFilters = parsed.filters
+				const queryParts: string[] = []
+				if (oldFilters.status)
+					queryParts.push(`is:${oldFilters.status}`)
+				if (oldFilters.priority)
+					queryParts.push(`priority:${oldFilters.priority}`)
+				if (oldFilters.type) queryParts.push(`type:${oldFilters.type}`)
+				if (oldFilters.search) queryParts.push(oldFilters.search)
+				return {
+					filters: { query: queryParts.join(' ') || 'is:open' },
+					selectedIssueId: parsed.selectedIssueId || null
+				}
+			}
+			return parsed
+		}
+	} catch (e) {
+		console.error('Failed to load state from localStorage:', e)
+	}
+	return {
+		filters: { query: 'is:open' }, // Default to showing open issues
+		selectedIssueId: null
+	}
+}
+
+function saveState(filters: FilterState, selectedIssueId: string | null) {
+	try {
+		localStorage.setItem(
+			STORAGE_KEY,
+			JSON.stringify({ filters, selectedIssueId })
+		)
+	} catch (e) {
+		console.error('Failed to save state to localStorage:', e)
+	}
+}
+
+export function App() {
+	const [issues, setIssues] = useState<Issue[]>([])
+	const [loading, setLoading] = useState(true)
+	const [error, setError] = useState<string | null>(null)
+
+	const initialState = loadState()
+	const [filters, setFilters] = useState<FilterState>(initialState.filters)
+	const [selectedIssueId, setSelectedIssueId] = useState<string | null>(
+		initialState.selectedIssueId
+	)
+	const [showHelp, setShowHelp] = useState(false)
+	const [showCreate, setShowCreate] = useState(false)
+	const [showEdit, setShowEdit] = useState(false)
+	const [showCloseConfirm, setShowCloseConfirm] = useState(false)
+	const [showReopenConfirm, setShowReopenConfirm] = useState(false)
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+	const [isDeleting, setIsDeleting] = useState(false)
+	const [actionLoading, setActionLoading] = useState(false)
+
+	// Fetch issues function - reusable for refresh
+	const fetchIssues = useCallback(async (showLoading = false) => {
+		try {
+			if (showLoading) setLoading(true)
+			const response = await fetch('/api/issues')
+			if (!response.ok) throw new Error('Failed to fetch issues')
+			const data = await response.json()
+			setIssues(data)
+			setError(null)
+		} catch (e) {
+			setError(e instanceof Error ? e.message : 'Unknown error')
+		} finally {
+			setLoading(false)
+		}
+	}, [])
+
+	// Initial fetch
+	useEffect(() => {
+		fetchIssues(true)
+	}, [fetchIssues])
+
+	// Auto-refresh when window regains focus or tab becomes visible
+	useEffect(() => {
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === 'visible') {
+				fetchIssues()
+			}
+		}
+
+		const handleFocus = () => {
+			fetchIssues()
+		}
+
+		document.addEventListener('visibilitychange', handleVisibilityChange)
+		window.addEventListener('focus', handleFocus)
+
+		return () => {
+			document.removeEventListener('visibilitychange', handleVisibilityChange)
+			window.removeEventListener('focus', handleFocus)
+		}
+	}, [fetchIssues])
+
+	useEffect(() => {
+		saveState(filters, selectedIssueId)
+	}, [filters, selectedIssueId])
+
+	const handleSelectIssue = useCallback((id: string | null) => {
+		setSelectedIssueId(id)
+	}, [])
+
+	const handleCloseIssue = useCallback(async () => {
+		if (!selectedIssueId || actionLoading) return
+		setActionLoading(true)
+		try {
+			const response = await fetch(`/api/issues/${selectedIssueId}/close`, { method: 'POST' })
+			if (!response.ok) throw new Error('Failed to close issue')
+			setShowCloseConfirm(false)
+			await fetchIssues()
+		} catch (e) {
+			console.error('Failed to close issue:', e)
+		} finally {
+			setActionLoading(false)
+		}
+	}, [selectedIssueId, actionLoading, fetchIssues])
+
+	const handleReopenIssue = useCallback(async () => {
+		if (!selectedIssueId || actionLoading) return
+		setActionLoading(true)
+		try {
+			const response = await fetch(`/api/issues/${selectedIssueId}/reopen`, { method: 'POST' })
+			if (!response.ok) throw new Error('Failed to reopen issue')
+			setShowReopenConfirm(false)
+			await fetchIssues()
+		} catch (e) {
+			console.error('Failed to reopen issue:', e)
+		} finally {
+			setActionLoading(false)
+		}
+	}, [selectedIssueId, actionLoading, fetchIssues])
+
+	const handleDeleteIssue = useCallback(async () => {
+		if (!selectedIssueId || isDeleting) return
+		setIsDeleting(true)
+		try {
+			const response = await fetch(`/api/issues/${selectedIssueId}/delete`, { method: 'DELETE' })
+			if (!response.ok) throw new Error('Failed to delete issue')
+			setShowDeleteConfirm(false)
+			setSelectedIssueId(null)
+			await fetchIssues()
+		} catch (e) {
+			console.error('Failed to delete issue:', e)
+		} finally {
+			setIsDeleting(false)
+		}
+	}, [selectedIssueId, isDeleting, fetchIssues])
+
+	const filteredIssues = useMemo(() => {
+		return filterByQuery(issues, filters.query)
+	}, [issues, filters.query])
+
+	const selectedIssue = selectedIssueId
+		? issues.find(i => i.id === selectedIssueId) || null
+		: null
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center h-screen bg-background text-text-muted">
+				Loading issues...
+			</div>
+		)
+	}
+
+	if (error) {
+		return (
+			<div className="flex items-center justify-center h-screen bg-background text-red-400">
+				Error: {error}
+			</div>
+		)
+	}
+
+	return (
+		<div className="flex h-screen bg-background text-text-primary font-sans text-sm leading-relaxed">
+			{/* Sidebar - hidden on mobile when issue is selected */}
+			<aside className={`w-full md:w-[380px] md:min-w-[380px] border-r border-border flex flex-col h-screen bg-background ${
+				selectedIssue ? 'hidden md:flex' : 'flex'
+			}`}>
+				<div className="p-4 md:p-5 border-b border-border">
+					<div className="flex items-center justify-between mb-4">
+						<h1 className="text-lg font-semibold text-text-primary">
+							issy
+						</h1>
+						<button
+							onClick={() => setShowCreate(true)}
+							className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-text-primary bg-surface hover:bg-surface-elevated border border-border rounded-lg transition-colors"
+						>
+							<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+								<path d="M12 5v14M5 12h14" />
+							</svg>
+							New
+						</button>
+					</div>
+
+					<div className="flex items-center bg-surface border border-border rounded-lg focus-within:border-accent transition-colors">
+						<input
+							type="text"
+							placeholder="Filter: is:open priority:high..."
+							value={filters.query}
+							onChange={e => setFilters({ query: e.target.value })}
+							className="flex-1 px-3.5 py-2.5 bg-transparent text-text-primary text-sm placeholder:text-text-muted focus:outline-none"
+						/>
+						<button
+							onClick={() => setShowHelp(true)}
+							aria-label="Query syntax help"
+							title="Query syntax help"
+							className="w-10 h-[38px] shrink-0 flex items-center justify-center border-l border-border rounded-r-lg text-text-muted text-sm font-medium cursor-pointer transition-colors hover:bg-surface-elevated hover:text-text-primary"
+						>
+							?
+						</button>
+					</div>
+
+					<div className="mt-3">
+						<FilterBar
+							query={filters.query}
+							onQueryChange={(query) => setFilters({ query })}
+							issues={issues}
+						/>
+					</div>
+				</div>
+
+				<div className="flex-1 overflow-y-auto custom-scrollbar">
+					<IssueList
+						issues={filteredIssues}
+						selectedId={selectedIssueId}
+						onSelect={handleSelectIssue}
+					/>
+				</div>
+
+				<div className="px-4 md:px-5 py-3 border-t border-border text-xs text-text-muted">
+					{filteredIssues.length} of {issues.length} issues
+				</div>
+			</aside>
+
+			{/* Main content - full width on mobile when issue selected, hidden when no issue on mobile */}
+			<main className={`flex-1 h-screen overflow-y-auto bg-background custom-scrollbar ${
+				selectedIssue ? 'block' : 'hidden md:block'
+			}`}>
+				{selectedIssue ? (
+					<IssueDetail 
+						issue={selectedIssue} 
+						onBack={() => handleSelectIssue(null)}
+						onEdit={() => setShowEdit(true)}
+						onClose={() => setShowCloseConfirm(true)}
+						onReopen={() => setShowReopenConfirm(true)}
+						onDelete={() => setShowDeleteConfirm(true)}
+					/>
+				) : (
+					<div className="flex items-center justify-center h-full text-text-muted text-[15px]">
+						Select an issue to view details
+					</div>
+				)}
+			</main>
+
+			{/* Modals */}
+			<QueryHelpModal isOpen={showHelp} onClose={() => setShowHelp(false)} />
+			
+			<CreateIssueModal
+				isOpen={showCreate}
+				onClose={() => setShowCreate(false)}
+				onCreated={fetchIssues}
+			/>
+			
+			<EditIssueModal
+				issue={selectedIssue}
+				isOpen={showEdit}
+				onClose={() => setShowEdit(false)}
+				onUpdated={fetchIssues}
+			/>
+			
+			<ConfirmModal
+				isOpen={showCloseConfirm}
+				title="Close Issue"
+				message={`Are you sure you want to close issue #${selectedIssue?.id}?`}
+				confirmText="Close Issue"
+				onConfirm={handleCloseIssue}
+				onCancel={() => setShowCloseConfirm(false)}
+				isLoading={actionLoading}
+			/>
+			
+			<ConfirmModal
+				isOpen={showReopenConfirm}
+				title="Reopen Issue"
+				message={`Are you sure you want to reopen issue #${selectedIssue?.id}?`}
+				confirmText="Reopen Issue"
+				onConfirm={handleReopenIssue}
+				onCancel={() => setShowReopenConfirm(false)}
+				isLoading={actionLoading}
+			/>
+			
+			<ConfirmModal
+				isOpen={showDeleteConfirm}
+				title="Delete Issue"
+				message={`Are you sure you want to permanently delete issue #${selectedIssue?.id}? This action cannot be undone.`}
+				confirmText="Delete"
+				confirmVariant="danger"
+				onConfirm={handleDeleteIssue}
+				onCancel={() => setShowDeleteConfirm(false)}
+				isLoading={isDeleting}
+			/>
+		</div>
+	)
+}

package/src/components/Badge.tsx

@@ -0,0 +1,49 @@
+interface BadgeProps {
+  variant: 'status' | 'priority' | 'type' | 'label';
+  value: string;
+  className?: string;
+}
+
+const statusStyles: Record<string, string> = {
+  open: "bg-green-500/15 text-green-500",
+  closed: "bg-gray-500/15 text-gray-400",
+};
+
+const priorityStyles: Record<string, string> = {
+  high: "bg-priority-high/15 text-red-400",
+  medium: "bg-priority-medium/15 text-amber-400",
+  low: "bg-priority-low/15 text-green-400",
+};
+
+const typeStyles: Record<string, string> = {
+  bug: "bg-red-500/15 text-red-400",
+  feature: "bg-blue-500/15 text-blue-400",
+  enhancement: "bg-purple-500/15 text-purple-400",
+};
+
+export function Badge({ variant, value, className = '' }: BadgeProps) {
+  const normalizedValue = value.toLowerCase();
+  
+  let style = '';
+  
+  switch (variant) {
+    case 'status':
+      style = statusStyles[normalizedValue] || statusStyles.open;
+      break;
+    case 'priority':
+      style = priorityStyles[normalizedValue] || '';
+      break;
+    case 'type':
+      style = typeStyles[normalizedValue] || "bg-purple-500/15 text-purple-400";
+      break;
+    case 'label':
+      style = "bg-surface-elevated text-text-secondary";
+      break;
+  }
+  
+  return (
+    <span className={`inline-block px-2 py-0.5 rounded text-[11px] font-medium ${style} ${className}`}>
+      {normalizedValue}
+    </span>
+  );
+}

package/src/components/ConfirmModal.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+
+interface ConfirmModalProps {
+  isOpen: boolean
+  title: string
+  message: string
+  confirmText?: string
+  confirmVariant?: 'danger' | 'default'
+  onConfirm: () => void
+  onCancel: () => void
+  isLoading?: boolean
+}
+
+export function ConfirmModal({
+  isOpen,
+  title,
+  message,
+  confirmText = 'Confirm',
+  confirmVariant = 'default',
+  onConfirm,
+  onCancel,
+  isLoading = false,
+}: ConfirmModalProps) {
+  if (!isOpen) return null
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget && !isLoading) {
+      onCancel()
+    }
+  }
+
+  const confirmStyles = confirmVariant === 'danger'
+    ? 'bg-red-500 hover:bg-red-600 text-white'
+    : 'bg-accent hover:bg-accent-hover text-white'
+
+  return (
+    <div 
+      className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4"
+      onClick={handleBackdropClick}
+    >
+      <div className="bg-surface-elevated border border-border rounded-xl w-full max-w-sm shadow-2xl">
+        <div className="px-5 py-4 border-b border-border">
+          <h2 className="text-lg font-semibold text-text-primary">{title}</h2>
+        </div>
+
+        <div className="p-5">
+          <p className="text-sm text-text-secondary mb-6">{message}</p>
+
+          <div className="flex justify-end gap-3">
+            <button
+              type="button"
+              onClick={onCancel}
+              disabled={isLoading}
+              className="px-4 py-2 text-sm text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={onConfirm}
+              disabled={isLoading}
+              className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 ${confirmStyles}`}
+            >
+              {isLoading ? 'Processing...' : confirmText}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/CreateIssueModal.tsx

@@ -0,0 +1,176 @@
+import React, { useState } from 'react'
+
+interface CreateIssueModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onCreated: () => void
+}
+
+export function CreateIssueModal({ isOpen, onClose, onCreated }: CreateIssueModalProps) {
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [type, setType] = useState<'bug' | 'improvement'>('improvement')
+  const [priority, setPriority] = useState<'high' | 'medium' | 'low'>('medium')
+  const [labels, setLabels] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  if (!isOpen) return null
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (!title.trim()) {
+      setError('Title is required')
+      return
+    }
+
+    setIsSubmitting(true)
+    setError(null)
+
+    try {
+      const response = await fetch('/api/issues/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: title.trim(),
+          description: description.trim() || title.trim(),
+          type,
+          priority,
+          labels: labels.trim() || undefined,
+        }),
+      })
+
+      if (!response.ok) {
+        const data = await response.json()
+        throw new Error(data.error || 'Failed to create issue')
+      }
+
+      // Reset form and close
+      setTitle('')
+      setDescription('')
+      setType('improvement')
+      setPriority('medium')
+      setLabels('')
+      onCreated()
+      onClose()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unknown error')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose()
+    }
+  }
+
+  return (
+    <div 
+      className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4"
+      onClick={handleBackdropClick}
+    >
+      <div className="bg-surface-elevated border border-border rounded-xl w-full max-w-lg shadow-2xl">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+          <h2 className="text-lg font-semibold text-text-primary">New Issue</h2>
+          <button
+            onClick={onClose}
+            className="text-text-muted hover:text-text-primary transition-colors"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-5 space-y-4">
+          {error && (
+            <div className="px-3 py-2 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm text-text-secondary mb-1.5">Title *</label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Brief description of the issue"
+              autoFocus
+              className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-text-primary text-sm placeholder:text-text-muted focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm text-text-secondary mb-1.5">Description</label>
+            <input
+              type="text"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="One-line summary (defaults to title)"
+              className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-text-primary text-sm placeholder:text-text-muted focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm text-text-secondary mb-1.5">Type</label>
+              <select
+                value={type}
+                onChange={(e) => setType(e.target.value as 'bug' | 'improvement')}
+                className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-text-primary text-sm focus:outline-none focus:border-accent"
+              >
+                <option value="improvement">Improvement</option>
+                <option value="bug">Bug</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm text-text-secondary mb-1.5">Priority</label>
+              <select
+                value={priority}
+                onChange={(e) => setPriority(e.target.value as 'high' | 'medium' | 'low')}
+                className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-text-primary text-sm focus:outline-none focus:border-accent"
+              >
+                <option value="high">High</option>
+                <option value="medium">Medium</option>
+                <option value="low">Low</option>
+              </select>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm text-text-secondary mb-1.5">Labels</label>
+            <input
+              type="text"
+              value={labels}
+              onChange={(e) => setLabels(e.target.value)}
+              placeholder="Comma-separated: ui, backend, api"
+              className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-text-primary text-sm placeholder:text-text-muted focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          <div className="flex justify-end gap-3 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="px-4 py-2 bg-accent hover:bg-accent-hover text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
+            >
+              {isSubmitting ? 'Creating...' : 'Create Issue'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}