feat(switchyard): add Previews tab to the right panel

apps/switchyard/src/components/Inspector.tsx

@@ -1,5 +1,5 @@
 /**
- * The right-hand panel: the machine's side of the track, in three tabs.
+ * The right-hand panel: the machine's side of the track, in tabs.
  *
  * Files, changes and checks are the three questions you ask about work you did
  * not do yourself — what is there, what moved, and whether it is good. They
@@ -18,8 +18,9 @@ import type { Capabilities, Project, Track } from "../../shared/api";
 import { Changes, useDiff } from "./Changes";
 import { Checks } from "./Checks";
 import { Files } from "./Files";
+import { TrackPreview } from "./TrackPreview";
 
-type Tab = "files" | "changes" | "checks";
+type Tab = "files" | "changes" | "checks" | "previews";
 
 export function Inspector({ track, project, capabilities }: { track: Track; project: Project; capabilities: Capabilities }) {
   const [tab, setTab] = useState<Tab>("files");
@@ -31,7 +32,7 @@ export function Inspector({ track, project, capabilities }: { track: Track; proj
   // put the class on.
   return (
     <>
-      <div className="tabs">
+      <div className="tabs inspector-tabs">
         <button type="button" className={`tab${tab === "files" ? " on" : ""}`} onClick={() => setTab("files")}>
           All files
         </button>
@@ -43,12 +44,25 @@ export function Inspector({ track, project, capabilities }: { track: Track; proj
         <button type="button" className={`tab${tab === "checks" ? " on" : ""}`} onClick={() => setTab("checks")}>
           Checks
         </button>
+        <button type="button" className={`tab${tab === "previews" ? " on" : ""}`} onClick={() => setTab("previews")}>
+          Previews
+        </button>
       </div>
 
       <div className="scroll">
         {tab === "files" ? <Files track={track} /> : null}
         {tab === "changes" ? <Changes diff={diff} /> : null}
         {tab === "checks" ? <Checks track={track} project={project} capabilities={capabilities} /> : null}
+        {tab === "previews" ? <div className="preview-platforms">
+          <section className="preview-platform" aria-label="Web preview">
+            <h3>Web</h3>
+            {track.status === "closed" ? <p className="fine">Previews are unavailable for closed tracks.</p> : <TrackPreview key={track.id} trackId={track.id} closed={false} />}
+          </section>
+          {(["iOS", "Android"] as const).map(platform => <section className="preview-platform" aria-label={`${platform} preview`} key={platform}>
+            <div className="row"><h3>{platform}</h3><span className="chip">Coming soon</span></div>
+            <p className="fine">{platform} previews will be available here.</p>
+          </section>)}
+        </div> : null}
       </div>
     </>
   );

apps/switchyard/src/components/TrackView.tsx

@@ -22,8 +22,6 @@ import { Branch, Clock, External, Folder, Info, Issue, Pull, Wrench } from "../l
 import type { OutgoingImage } from "../lib/images";
 import { others, subject, useHeartbeat } from "../lib/presence";
 import { Composer } from "./Composer";
-import { TrackPreview } from "./TrackPreview";
-import { NativePreviewLauncher } from "./NativePreview";
 import { SharedBrowser } from "./SharedBrowser";
 import { Transcript } from "./Transcript";
 
@@ -286,8 +284,6 @@ export function TrackView(props: TrackViewProps) {
         </section>
       ) : null}
       {queueError ? <div className="composer-note" role="status">Could not refresh saved prompts. Reconnecting…</div> : null}
-      <TrackPreview key={track.id} trackId={track.id} closed={track.status === "closed"} />
-      {experimentalPreviews ? <NativePreviewLauncher trackId={track.id} owner={track.role === "owner"} /> : null}
       <Composer
         onSend={send}
         onInterrupt={interrupt}

apps/switchyard/src/styles.css

@@ -1100,7 +1100,12 @@ input.crumb-name { width: 30ch; }
   color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 
-.track-preview { border-top: 1px solid var(--line); padding: 10px 16px 4px; }
+.inspector-tabs { flex-wrap: wrap; }
+.preview-platforms { padding: 12px; display: grid; gap: 12px; }
+.preview-platform { border: 1px solid var(--line); border-radius: 8px; padding: 12px; min-width: 0; }
+.preview-platform h3 { margin: 0; font-size: 13px; }
+.preview-platform .row { flex-wrap: wrap; }
+.track-preview { padding-top: 12px; }
 .preview-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
 .preview-controls button { min-height: 34px; }
 .preview-state { font-size: 12px; color: var(--dim); padding: 0 6px; }
@@ -1111,7 +1116,6 @@ input.crumb-name { width: 30ch; }
 .preview-fields input, .preview-fields textarea { width: 100%; min-width: 0; box-sizing: border-box; }
 .preview-logs { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 55vh; overflow: auto; font-size: 12px; }
 @media (max-width: 760px) {
-  .track-preview { padding: 8px 10px 2px; }
   .preview-controls button { min-height: 40px; }
 }