feat: rebuild warm operations workbench

apps/web/src/instances/instance-detail.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { useEffect, useRef, useState } from 'react';
+import { Tag, Title } from 'animal-island-ui';
 
 import type { InstanceContext, InstanceModule } from '../app-shell.js';
 import { canonicalHttpOrigin } from '../fleet/fleet-page.js';
@@ -124,7 +125,9 @@ export function InstanceDetail({
   if (!ownsRoute) {
     return (
       <section>
-        <h1>{INSTANCE_MODULE_LABELS[module]}</h1>
+        <h1>
+          <Title>{INSTANCE_MODULE_LABELS[module]}</Title>
+        </h1>
         <p>此路由缺少实例上下文。</p>
       </section>
     );
@@ -142,16 +145,35 @@ export function InstanceDetail({
         </a>
         <div className="instance-identity">
           <div>
-            <h1>{instance.name}</h1>
+            <h1>
+              <Title color="app-teal">{instance.name}</Title>
+            </h1>
             <code>{instance.id}</code>
           </div>
           <div className="instance-context-badges">
-            {instance.status !== 'unknown' ? <span>{displayStatus(instance.status)}</span> : null}
+            {instance.status !== 'unknown' ? (
+              <Tag
+                size="small"
+                color={
+                  instance.status === 'online'
+                    ? 'app-teal'
+                    : instance.status === 'offline'
+                      ? 'app-red'
+                      : 'app-yellow'
+                }
+              >
+                {displayStatus(instance.status)}
+              </Tag>
+            ) : null}
             {instance.authentication !== 'unknown' ? (
-              <span>{AUTH_LABELS[instance.authentication]}</span>
+              <Tag size="small" color="app-yellow">
+                {AUTH_LABELS[instance.authentication]}
+              </Tag>
             ) : null}
             {instance.freshness !== 'unknown' ? (
-              <span>{FRESHNESS_LABELS[instance.freshness]}</span>
+              <Tag size="small" color="app-blue">
+                {FRESHNESS_LABELS[instance.freshness]}
+              </Tag>
             ) : null}
           </div>
         </div>
@@ -185,7 +207,11 @@ export function InstanceDetail({
         </nav>
       </header>
       <div className="instance-module-detail">
-        <h2>{INSTANCE_MODULE_LABELS[module]}</h2>
+        <h2>
+          <Title size="small" color="app-green">
+            {INSTANCE_MODULE_LABELS[module]}
+          </Title>
+        </h2>
         {loading ? <p role="status">正在加载能力…</p> : null}
         {loadError ? <p role="alert">能力不可用：{loadError}</p> : null}
         {!loading && canOpen(module, activeCapability) ? (