effect-start 0.22.0 → 0.23.0

package/src/console/ui/Git.tsx

@@ -0,0 +1,182 @@
+export interface GitFileEntry {
+  readonly status: string
+  readonly path: string
+}
+
+export interface GitStatus {
+  readonly oid: string
+  readonly head: string
+  readonly upstream: string | undefined
+  readonly ahead: number
+  readonly behind: number
+  readonly tag: string | undefined
+  readonly tagDistance: number
+  readonly staged: Array<GitFileEntry>
+  readonly unstaged: Array<GitFileEntry>
+  readonly untracked: Array<string>
+}
+
+const xyToLabel: Record<string, string> = {
+  M: "modified",
+  A: "new file",
+  D: "deleted",
+  R: "renamed",
+  C: "copied",
+  T: "typechange",
+  U: "unmerged",
+}
+
+function statusLabel(code: string): string {
+  return xyToLabel[code] ?? code
+}
+
+function gitStatusColor(code: string): string {
+  if (code === "D") return "#ef4444"
+  if (code === "A") return "#4ade80"
+  if (code === "R" || code === "C") return "#60a5fa"
+  if (code === "M") return "#fbbf24"
+  return "#94a3b8"
+}
+
+export function parseGitStatus(porcelain: string, tagLine: string): GitStatus {
+  const lines = porcelain.split("\n")
+  let oid = ""
+  let head = ""
+  let upstream: string | undefined
+  let ahead = 0
+  let behind = 0
+  const staged: Array<GitFileEntry> = []
+  const unstaged: Array<GitFileEntry> = []
+  const untracked: Array<string> = []
+
+  for (const line of lines) {
+    if (line.startsWith("# branch.oid ")) {
+      oid = line.slice("# branch.oid ".length, "# branch.oid ".length + 7)
+    } else if (line.startsWith("# branch.head ")) {
+      head = line.slice("# branch.head ".length)
+    } else if (line.startsWith("# branch.upstream ")) {
+      upstream = line.slice("# branch.upstream ".length)
+    } else if (line.startsWith("# branch.ab ")) {
+      const parts = line.slice("# branch.ab ".length).split(" ")
+      ahead = parseInt(parts[0]?.slice(1) ?? "0", 10)
+      behind = parseInt(parts[1]?.slice(1) ?? "0", 10)
+    } else if (line.startsWith("1 ") || line.startsWith("2 ")) {
+      const xy = line.slice(2, 4)
+      const x = xy[0]
+      const y = xy[1]
+      const parts = line.split("\t")
+      const firstParts = parts[0].split(" ")
+      const path = parts.length > 1 ? parts[1] : firstParts[firstParts.length - 1]
+      if (x !== "." && x !== "?") staged.push({ status: x, path })
+      if (y !== "." && y !== "?") unstaged.push({ status: y, path })
+    } else if (line.startsWith("u ")) {
+      const parts = line.split("\t")
+      const path = parts.length > 1 ? parts[1] : line.split(" ").pop()!
+      staged.push({ status: "U", path })
+    } else if (line.startsWith("? ")) {
+      untracked.push(line.slice(2))
+    }
+  }
+
+  let tag: string | undefined
+  let tagDistance = 0
+  const tagParts = tagLine.trim().split("\n")
+  if (tagParts[0] && !tagParts[0].startsWith("fatal")) {
+    tag = tagParts[0]
+    tagDistance = parseInt(tagParts[1] ?? "0", 10)
+  }
+
+  return { oid, head, upstream, ahead, behind, tag, tagDistance, staged, unstaged, untracked }
+}
+
+function GitKV({ label, children }: { label: string; children: any }) {
+  return (
+    <div style="display:flex;gap:8px;padding:3px 0;font-size:13px;font-family:monospace">
+      <span style="color:#6b7280;min-width:80px">{label}</span>
+      <span style="color:#e5e7eb">{children}</span>
+    </div>
+  )
+}
+
+function GitFileRow({ entry }: { entry: GitFileEntry }) {
+  const label = statusLabel(entry.status)
+  const color = gitStatusColor(entry.status)
+  return (
+    <div style="display:flex;gap:12px;padding:2px 0;font-size:13px;font-family:monospace">
+      <span style={`color:${color};font-style:italic;min-width:80px`}>{label}</span>
+      <span style="color:#d1d5db">{entry.path}</span>
+    </div>
+  )
+}
+
+function SectionHeader({ title, count }: { title: string; count: number }) {
+  return (
+    <div style="color:#fbbf24;font-size:14px;font-weight:600;padding:16px 0 6px;font-family:monospace">
+      {title} ({count})
+    </div>
+  )
+}
+
+export function GitStatusView({ status }: { status: GitStatus }) {
+  return (
+    <div style="padding:12px 16px">
+      <GitKV label="Head:">
+        <span style="color:#94a3b8;font-style:italic">{status.oid}</span>{" "}
+        <span style="color:#4ade80;font-weight:600">{status.head}</span>
+      </GitKV>
+      {status.upstream && (
+        <GitKV label="Upstream:">
+          <span style="color:#94a3b8;font-style:italic">{status.oid}</span>{" "}
+          <span style="color:#60a5fa;font-weight:600">{status.upstream}</span>
+          {(status.ahead > 0 || status.behind > 0) && (
+            <span style="color:#94a3b8">
+              {status.ahead > 0 ? ` +${status.ahead}` : ""}
+              {status.behind > 0 ? ` -${status.behind}` : ""}
+            </span>
+          )}
+        </GitKV>
+      )}
+      {status.tag && (
+        <GitKV label="Tag:">
+          <span style="color:#e5e7eb">{status.tag}</span>
+          {status.tagDistance > 0 && <span style="color:#60a5fa"> ({status.tagDistance})</span>}
+        </GitKV>
+      )}
+
+      {status.untracked.length > 0 && (
+        <>
+          <SectionHeader title="Untracked files" count={status.untracked.length} />
+          {status.untracked.map((f) => (
+            <div style="padding:2px 0;font-size:13px;font-family:monospace;color:#d1d5db">{f}</div>
+          ))}
+        </>
+      )}
+
+      {status.unstaged.length > 0 && (
+        <>
+          <SectionHeader title="Unstaged changes" count={status.unstaged.length} />
+          {status.unstaged.map((e) => (
+            <GitFileRow entry={e} />
+          ))}
+        </>
+      )}
+
+      {status.staged.length > 0 && (
+        <>
+          <SectionHeader title="Staged changes" count={status.staged.length} />
+          {status.staged.map((e) => (
+            <GitFileRow entry={e} />
+          ))}
+        </>
+      )}
+
+      {status.untracked.length === 0 &&
+        status.unstaged.length === 0 &&
+        status.staged.length === 0 && (
+          <div style="color:#4ade80;font-size:13px;font-family:monospace;padding:16px 0">
+            Clean working tree
+          </div>
+        )}
+    </div>
+  )
+}

package/src/console/ui/Logs.tsx

@@ -0,0 +1,46 @@
+import * as ConsoleStore from "../ConsoleStore.ts"
+
+function levelColor(level: string): string {
+  if (level === "DEBUG") return "#94a3b8"
+  if (level === "INFO") return "#60a5fa"
+  if (level === "WARNING") return "#fbbf24"
+  if (level === "ERROR") return "#ef4444"
+  if (level === "FATAL") return "#dc2626"
+  return "#e5e7eb"
+}
+
+export function LogLine({ log }: { log: ConsoleStore.ConsoleLog }) {
+  const color = levelColor(log.level)
+  const time = log.date.toLocaleTimeString("en", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  })
+
+  return (
+    <div
+      id={`log-${log.id}`}
+      style="padding:3px 8px;border-bottom:1px solid #1f2937;font-family:monospace;font-size:12px;display:flex;align-items:baseline"
+    >
+      <span style="color:#6b7280;white-space:nowrap">{time}</span>
+      <span style={`color:${color};font-weight:600;width:56px;text-align:center;flex-shrink:0`}>
+        {log.level}
+      </span>
+      <span style="color:#e5e7eb;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis">
+        {log.message}
+      </span>
+      <a
+        href={`${ConsoleStore.store.prefix}/fibers/${log.fiberId.replace("#", "")}`}
+        style="color:#6b7280;white-space:nowrap;margin-left:8px;text-decoration:none"
+      >
+        {log.fiberId}
+      </a>
+      {log.cause && (
+        <div style="color:#ef4444;font-size:11px;padding:2px 0 0 0;white-space:pre-wrap;width:100%">
+          {log.cause}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/console/ui/Metrics.tsx

@@ -0,0 +1,78 @@
+import type * as ConsoleStore from "../ConsoleStore.ts"
+
+function MetricValue({ metric }: { metric: ConsoleStore.ConsoleMetricSnapshot }) {
+  if (metric.type === "counter" || metric.type === "gauge") {
+    return (
+      <div style="font-size:32px;font-weight:700;color:#e5e7eb;font-family:monospace;line-height:1.1">
+        {String(metric.value)}
+      </div>
+    )
+  }
+  if (metric.type === "histogram") {
+    const h = metric.value as { count: number; sum: number; min: number; max: number }
+    return (
+      <div style="display:grid;grid-template-columns:auto auto;gap:2px 12px;font-size:12px;font-family:monospace">
+        <span style="color:#6b7280">count</span>
+        <span style="color:#e5e7eb">{h.count}</span>
+        <span style="color:#6b7280">sum</span>
+        <span style="color:#e5e7eb">{h.sum.toFixed(2)}</span>
+        <span style="color:#6b7280">min</span>
+        <span style="color:#e5e7eb">{h.min.toFixed(2)}</span>
+        <span style="color:#6b7280">max</span>
+        <span style="color:#e5e7eb">{h.max.toFixed(2)}</span>
+      </div>
+    )
+  }
+  if (metric.type === "frequency") {
+    const occ = metric.value as Record<string, number>
+    return (
+      <div style="display:grid;grid-template-columns:auto auto;gap:2px 12px;font-size:12px;font-family:monospace">
+        {Object.entries(occ)
+          .slice(0, 10)
+          .map(([k, v]) => (
+            <>
+              <span style="color:#6b7280">{k}</span>
+              <span style="color:#e5e7eb">{v}</span>
+            </>
+          ))}
+      </div>
+    )
+  }
+  return (
+    <pre style="font-size:11px;color:#9ca3af;margin:0;white-space:pre-wrap">
+      {JSON.stringify(metric.value, null, 2)}
+    </pre>
+  )
+}
+
+function MetricCard({ metric }: { metric: ConsoleStore.ConsoleMetricSnapshot }) {
+  return (
+    <div style="background:#111827;border:1px solid #374151;border-radius:6px;padding:12px;min-width:200px">
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
+        <span style="color:#d1d5db;font-size:13px;font-weight:600">{metric.name}</span>
+        <span style="font-size:10px;padding:1px 6px;border-radius:4px;background:#1e3a5f;color:#60a5fa">
+          {metric.type}
+        </span>
+      </div>
+      <MetricValue metric={metric} />
+      {metric.tags.length > 0 && (
+        <div style="font-size:10px;color:#6b7280;margin-top:4px">
+          {metric.tags.map((t) => `${t.key}=${t.value}`).join(" ")}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function MetricsGrid({ metrics }: { metrics: Array<ConsoleStore.ConsoleMetricSnapshot> }) {
+  if (metrics.length === 0) {
+    return <div class="empty">Waiting for metrics...</div>
+  }
+  return (
+    <>
+      {metrics.map((m) => (
+        <MetricCard metric={m} />
+      ))}
+    </>
+  )
+}

package/src/console/ui/Routes.tsx

@@ -0,0 +1,125 @@
+export interface RouteInfo {
+  readonly method: string
+  readonly path: string
+  readonly format: string | undefined
+}
+
+function groupByPath(routes: Array<RouteInfo>): Array<{ path: string; routes: Array<RouteInfo> }> {
+  const byPath = new Map<string, Array<RouteInfo>>()
+  for (const r of routes) {
+    let group = byPath.get(r.path)
+    if (!group) {
+      group = []
+      byPath.set(r.path, group)
+    }
+    group.push(r)
+  }
+  return Array.from(byPath, ([path, routes]) => ({
+    path,
+    routes: routes.sort((a, b) => methodOrder.indexOf(a.method) - methodOrder.indexOf(b.method)),
+  })).sort((a, b) => a.path.localeCompare(b.path))
+}
+
+function methodColor(method: string): string {
+  if (method === "GET") return "#22c55e"
+  if (method === "POST") return "#3b82f6"
+  if (method === "PUT") return "#f59e0b"
+  if (method === "DELETE") return "#ef4444"
+  if (method === "PATCH") return "#a855f7"
+  if (method === "*") return "#6b7280"
+  return "#94a3b8"
+}
+
+function methodBg(method: string): string {
+  if (method === "GET") return "#052e16"
+  if (method === "POST") return "#172554"
+  if (method === "PUT") return "#422006"
+  if (method === "DELETE") return "#450a0a"
+  if (method === "PATCH") return "#3b0764"
+  return "#1e293b"
+}
+
+const methodOrder = ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS", "*"]
+
+function MethodBadge({ method }: { method: string }) {
+  return (
+    <span
+      style={`font-size:10px;font-weight:700;font-family:monospace;padding:2px 6px;border-radius:3px;background:${methodBg(method)};color:${methodColor(method)};min-width:48px;text-align:center;display:inline-block`}
+    >
+      {method}
+    </span>
+  )
+}
+
+function FormatBadge({ format }: { format: string }) {
+  return (
+    <span style="font-size:10px;padding:1px 6px;border-radius:3px;background:#1e3a5f;color:#60a5fa">
+      {format}
+    </span>
+  )
+}
+
+function ColoredPath({ path }: { path: string }) {
+  const segments = path.split("/").filter(Boolean)
+  return (
+    <span style="font-family:monospace;font-size:13px">
+      {segments.length === 0 ? (
+        <span style="color:#e2e8f0">/</span>
+      ) : (
+        segments.map((seg) => {
+          const isParam = seg.startsWith(":")
+          return (
+            <>
+              <span style="color:#475569">/</span>
+              <span style={isParam ? "color:#c084fc" : "color:#e2e8f0"}>{seg}</span>
+            </>
+          )
+        })
+      )}
+    </span>
+  )
+}
+
+function PathGroup({ path, routes }: { path: string; routes: Array<RouteInfo> }) {
+  return (
+    <div style="padding:8px 12px;border-bottom:1px solid #1e293b">
+      <div style="margin-bottom:4px">
+        <ColoredPath path={path} />
+      </div>
+      <div style="display:flex;flex-wrap:wrap;gap:4px">
+        {routes.map((r) => (
+          <div style="display:flex;align-items:center;gap:6px">
+            <MethodBadge method={r.method} />
+            {r.format && <FormatBadge format={r.format} />}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function RouteList({ routes }: { routes: Array<RouteInfo> }) {
+  if (routes.length === 0) {
+    return <div class="empty">No routes registered</div>
+  }
+
+  const groups = groupByPath(routes)
+  const routeCount = routes.length
+  const pathCount = groups.length
+
+  return (
+    <>
+      <div style="padding:8px 12px;border-bottom:1px solid #1e293b;display:flex;gap:16px;font-size:12px;color:#64748b">
+        <span>
+          {pathCount} path{pathCount !== 1 ? "s" : ""}
+        </span>
+        <span>
+          {routeCount} route{routeCount !== 1 ? "s" : ""}
+        </span>
+      </div>
+      {groups.map((g) => (
+        <PathGroup path={g.path} routes={g.routes} />
+      ))}
+    </>
+  )
+}