feat(aircoding): AirCoding V2 baseline — deterministic multi-agent architecture

Forked from OpenCode v1.17.4 with multi-agent system:
- 5 agents: aircoding, scheduler, worker, architect, reviewer
- Deterministic DAG scheduling engine (coordinator_tick)
- Tool whitelists as hard enforcement
- AirCoding validation plugin
- V1 requirements: C4 docs, ADR, AGENTS.md, debug-log.md
- Design documents in docs/

packages/ui/src/components/tool-status-title.tsx

@@ -0,0 +1,136 @@
+import { Show, createEffect, createMemo, on, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { TextShimmer } from "./text-shimmer"
+
+function common(active: string, done: string) {
+  const a = Array.from(active)
+  const b = Array.from(done)
+  let i = 0
+  while (i < a.length && i < b.length && a[i] === b[i]) i++
+  return {
+    prefix: a.slice(0, i).join(""),
+    active: a.slice(i).join(""),
+    done: b.slice(i).join(""),
+  }
+}
+
+function contentWidth(el: HTMLSpanElement | undefined) {
+  if (!el) return
+  return `${Math.ceil(el.getBoundingClientRect().width)}px`
+}
+
+export function ToolStatusTitle(props: {
+  active: boolean
+  activeText: string
+  doneText: string
+  class?: string
+  split?: boolean
+}) {
+  const split = createMemo(() => common(props.activeText, props.doneText))
+  const suffix = createMemo(
+    () => (props.split ?? true) && split().prefix.length >= 2 && split().active.length > 0 && split().done.length > 0,
+  )
+  const prefixLen = createMemo(() => Array.from(split().prefix).length)
+  const activeTail = createMemo(() => (suffix() ? split().active : props.activeText))
+  const doneTail = createMemo(() => (suffix() ? split().done : props.doneText))
+
+  const [state, setState] = createStore({
+    active: props.active,
+    animating: false,
+    width: undefined as string | undefined,
+  })
+  const width = () => state.width
+  const active = () => state.active
+  const animating = () => state.animating
+  let activeRef: HTMLSpanElement | undefined
+  let doneRef: HTMLSpanElement | undefined
+  let widthRef: HTMLSpanElement | undefined
+  let frame: number | undefined
+  let finishTimer: ReturnType<typeof setTimeout> | undefined
+
+  const finish = () => {
+    if (frame !== undefined) cancelAnimationFrame(frame)
+    if (finishTimer !== undefined) clearTimeout(finishTimer)
+    frame = undefined
+    finishTimer = undefined
+    setState("animating", false)
+    setState("width", undefined)
+  }
+
+  const animate = () => {
+    const first = contentWidth(widthRef)
+    finish()
+    setState("animating", true)
+    setState("active", props.active)
+    const last = contentWidth(props.active ? activeRef : doneRef)
+    if (!first || !last) {
+      finish()
+      return
+    }
+
+    setState("width", first)
+    if (first === last) {
+      finishTimer = setTimeout(finish, 600)
+      return
+    }
+
+    frame = requestAnimationFrame(() => {
+      frame = undefined
+      setState("width", last)
+      finishTimer = setTimeout(finish, 600)
+    })
+  }
+
+  createEffect(on([() => props.active, activeTail, doneTail], () => animate(), { defer: true }))
+
+  onCleanup(() => {
+    finish()
+  })
+
+  return (
+    <span
+      data-component="tool-status-title"
+      data-active={active() ? "true" : "false"}
+      data-ready={animating() ? "true" : "false"}
+      data-mode={suffix() ? "suffix" : "swap"}
+      class={props.class}
+      aria-label={active() ? props.activeText : props.doneText}
+    >
+      <Show
+        when={suffix()}
+        fallback={
+          <span data-slot="tool-status-swap" ref={widthRef} style={{ width: width() }}>
+            <Show when={animating() || active()}>
+              <span data-slot="tool-status-active" ref={activeRef}>
+                <TextShimmer text={activeTail()} active={active()} offset={0} />
+              </span>
+            </Show>
+            <Show when={animating() || !active()}>
+              <span data-slot="tool-status-done" ref={doneRef}>
+                <TextShimmer text={doneTail()} active={false} offset={0} />
+              </span>
+            </Show>
+          </span>
+        }
+      >
+        <span data-slot="tool-status-suffix">
+          <span data-slot="tool-status-prefix">
+            <TextShimmer text={split().prefix} active={active()} offset={0} />
+          </span>
+          <span data-slot="tool-status-tail" ref={widthRef} style={{ width: width() }}>
+            <Show when={animating() || active()}>
+              <span data-slot="tool-status-active" ref={activeRef}>
+                <TextShimmer text={activeTail()} active={active()} offset={prefixLen()} />
+              </span>
+            </Show>
+            <Show when={animating() || !active()}>
+              <span data-slot="tool-status-done" ref={doneRef}>
+                <TextShimmer text={doneTail()} active={false} offset={prefixLen()} />
+              </span>
+            </Show>
+          </span>
+        </span>
+      </Show>
+    </span>
+  )
+}