dextunnel 0.1.0

package/public/remote-operator-state.js

@@ -0,0 +1,316 @@
+export function cloneReplyAttachments(attachments = []) {
+  return attachments.map((attachment) => ({
+    dataUrl: attachment.dataUrl,
+    id: attachment.id,
+    name: attachment.name,
+    size: attachment.size,
+    type: attachment.type
+  }));
+}
+
+export function scopedThreadStorageKey({
+  prefix = "",
+  scopeId = "",
+  threadId = ""
+} = {}) {
+  const normalizedPrefix = String(prefix || "");
+  const normalizedScopeId = String(scopeId || "").trim() || "default";
+  const normalizedThreadId = String(threadId || "").trim() || "none";
+  return `${normalizedPrefix}${normalizedScopeId}:${normalizedThreadId}`;
+}
+
+export function createQueuedReply({
+  attachments = [],
+  queuedAt = new Date().toISOString(),
+  rawText = "",
+  sequence = 1,
+  threadId = ""
+} = {}) {
+  const nextThreadId = String(threadId || "").trim();
+  if (!nextThreadId) {
+    throw new Error("No live session selected.");
+  }
+
+  return {
+    attachments: cloneReplyAttachments(attachments),
+    id: `queued-reply-${Date.now()}-${sequence}`,
+    queuedAt,
+    text: String(rawText || "").trim(),
+    threadId: nextThreadId
+  };
+}
+
+export function queueSummary(count = 0) {
+  const nextCount = Number(count || 0);
+  if (nextCount <= 0) {
+    return "";
+  }
+
+  return nextCount === 1 ? "1 queued" : `${nextCount} queued`;
+}
+
+export function sessionBlockedReason({
+  hasLiveThread = false,
+  watcherConnected = true
+} = {}) {
+  if (!hasLiveThread) {
+    return "No live session selected.";
+  }
+
+  if (!watcherConnected) {
+    return "Live watcher offline.";
+  }
+
+  return "";
+}
+
+export function composeBlockedReason({
+  pendingInteraction = false,
+  sessionReason = ""
+} = {}) {
+  if (sessionReason) {
+    return sessionReason;
+  }
+
+  if (pendingInteraction) {
+    return "Resolve the pending action first.";
+  }
+
+  return "";
+}
+
+export function controlBlockedReason({
+  hasAnyRemoteControl = false,
+  hasRemoteControl = false,
+  ownerLabel = "",
+  threadId = ""
+} = {}) {
+  if (!threadId) {
+    return "";
+  }
+
+  if (hasAnyRemoteControl && !hasRemoteControl) {
+    return `${ownerLabel || "Another remote surface"} currently has control.`;
+  }
+
+  return hasRemoteControl ? "" : "Take control to send from remote.";
+}
+
+export function sendBlockedReason({
+  hasAnyRemoteControl = false,
+  hasRemoteControl = false,
+  ownerLabel = "",
+  pendingInteraction = false,
+  sessionReason = "",
+  threadId = ""
+} = {}) {
+  return (
+    composeBlockedReason({
+      pendingInteraction,
+      sessionReason
+    }) ||
+    controlBlockedReason({
+      hasAnyRemoteControl,
+      hasRemoteControl,
+      ownerLabel,
+      threadId
+    })
+  );
+}
+
+export function controlClaimRequired(blockedReason = "") {
+  return String(blockedReason || "").trim() === "Take control to send from remote.";
+}
+
+export function threadBusy({
+  activeTurnId = "",
+  isSendingReply = false,
+  threadStatus = "",
+  writeLockStatus = ""
+} = {}) {
+  const normalizedStatus =
+    typeof threadStatus === "string"
+      ? threadStatus.trim().toLowerCase()
+      : (
+          threadStatus &&
+          typeof threadStatus === "object" &&
+          String(threadStatus.type || threadStatus.status || "").trim().toLowerCase()
+        ) || "";
+  const statusBusy = ["inprogress", "running"].includes(normalizedStatus);
+  return Boolean(isSendingReply || writeLockStatus || activeTurnId || statusBusy);
+}
+
+export function canQueueReply({
+  controlActive = false,
+  hasDraftPayload = false,
+  isControlling = false,
+  isSelecting = false,
+  isSendingReply = false,
+  pendingInteraction = false,
+  queuedCount = 0,
+  sessionBlocked = false,
+  threadBusy: busy = false,
+  threadId = ""
+} = {}) {
+  return Boolean(
+    threadId &&
+      !sessionBlocked &&
+      !pendingInteraction &&
+      !isSendingReply &&
+      !isSelecting &&
+      !isControlling &&
+      hasDraftPayload
+  );
+}
+
+export function canSteerReply({
+  blockedReason = "",
+  hasDraftPayload = false,
+  isControlling = false,
+  isDictating = false,
+  isSelecting = false,
+  isSendingReply = false,
+  threadBusy: busy = false,
+  threadId = ""
+} = {}) {
+  return Boolean(
+    threadId &&
+      hasDraftPayload &&
+      !isSendingReply &&
+      !isSelecting &&
+      !isControlling &&
+      !isDictating &&
+      !busy &&
+      (!blockedReason || controlClaimRequired(blockedReason))
+  );
+}
+
+export function defaultComposerStatus({
+  blockedReason = "",
+  composerStatus = "Ready",
+  composerStatusTone = "neutral",
+  controlActive = false,
+  hasDraftPayload = false,
+  isSendingReply = false,
+  queuedCount = 0,
+  threadBusy: busy = false
+} = {}) {
+  if (!isSendingReply && blockedReason && composerStatusTone === "neutral") {
+    return blockedReason;
+  }
+
+  const queued = queueSummary(queuedCount);
+  if (!isSendingReply && queued && composerStatusTone === "neutral") {
+    return busy ? `${queued}. Waiting for idle.` : `${queued}. Sending soon.`;
+  }
+
+  if (!isSendingReply && !controlActive && composerStatusTone === "neutral" && hasDraftPayload) {
+    return "Steer now takes control. Queue stays local.";
+  }
+
+  if (!isSendingReply && busy && composerStatusTone === "neutral") {
+    return controlActive ? "Codex is busy. Queue your next steer." : "Codex is busy. Queue now; it will send when idle.";
+  }
+
+  return composerStatus;
+}
+
+export function controlReleaseStatus({ hasDraft = false } = {}) {
+  return hasDraft ? "Remote control released. Draft kept." : "Remote control released.";
+}
+
+export function controlEventStatus({
+  event = null,
+  hasDraft = false,
+  isLocalActor = false,
+  queuedCount = 0
+} = {}) {
+  if (!event?.action) {
+    return "";
+  }
+
+  const queued = queueSummary(queuedCount);
+
+  if (event.action === "claim") {
+    if (!isLocalActor) {
+      return "";
+    }
+
+    if (queued) {
+      return `Remote control reclaimed. ${queued}. Sending soon.`;
+    }
+
+    if (hasDraft) {
+      return "Remote control active. Draft ready.";
+    }
+
+    return "Remote control active.";
+  }
+
+  if (event.action !== "release") {
+    return "";
+  }
+
+  if (event.cause === "expired") {
+    if (queued) {
+      return `Remote control expired. ${queued}. Waiting for control.`;
+    }
+
+    return hasDraft ? "Remote control expired. Draft kept." : "Remote control expired.";
+  }
+
+  if (event.actor === "host") {
+    if (queued) {
+      return `Remote control released by host. ${queued}. Waiting for control.`;
+    }
+
+    return hasDraft ? "Remote control released by host. Draft kept." : "Remote control released by host.";
+  }
+
+  if (queued) {
+    return `Remote control released. ${queued}. Waiting for control.`;
+  }
+
+  return controlReleaseStatus({ hasDraft });
+}
+
+export function controlReleaseFeedback({
+  eventAction = "",
+  hasDraft = false,
+  isControlling = false,
+  isSendingReply = false,
+  previousHadRemoteControl = false,
+  nextHasRemoteControl = false
+} = {}) {
+  if (isControlling || isSendingReply) {
+    return "";
+  }
+
+  if (eventAction === "release") {
+    return controlReleaseStatus({ hasDraft });
+  }
+
+  if (previousHadRemoteControl && !nextHasRemoteControl) {
+    return controlReleaseStatus({ hasDraft });
+  }
+
+  return "";
+}
+
+export function shouldFlushQueuedReplies({
+  blockedReason = "",
+  hasInFlight = false,
+  isSendingReply = false,
+  queuedCount = 0,
+  threadBusy: busy = false,
+  threadId = ""
+} = {}) {
+  return Boolean(
+    threadId &&
+      queuedCount > 0 &&
+      (!blockedReason || controlClaimRequired(blockedReason)) &&
+      !busy &&
+      !isSendingReply &&
+      !hasInFlight
+  );
+}

package/public/remote.html

@@ -0,0 +1,167 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+    >
+    <title>Dextunnel Remote</title>
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="/styles.css">
+  </head>
+  <body class="app-shell remote-shell">
+    <main class="terminal-shell remote-shell-main">
+      <section class="terminal-window remote-window" id="remote-window">
+        <aside id="remote-sidebar" class="remote-sidebar" aria-label="Projects and threads">
+          <div class="remote-sidebar-head">
+            <p class="remote-sidebar-kicker">Projects</p>
+            <p class="remote-sidebar-note">Threads by project</p>
+          </div>
+          <div id="remote-sidebar-groups" class="remote-sidebar-groups"></div>
+        </aside>
+        <button
+          type="button"
+          id="remote-sidebar-overlay"
+          class="remote-sidebar-overlay panel-hidden"
+          hidden
+          aria-label="Close thread menu"
+        ></button>
+
+        <section class="remote-main">
+          <section class="terminal-hero remote-hero">
+            <div class="remote-hero-row">
+              <div class="remote-hero-primary">
+                <button
+                  type="button"
+                  id="sidebar-toggle-button"
+                  class="command-button command-button-compact command-button-subtle sidebar-toggle-button"
+                  aria-expanded="true"
+                  aria-label="Collapse thread menu"
+                >
+                  <span class="hamburger-icon" aria-hidden="true">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </span>
+                </button>
+	                <div class="remote-hero-copy">
+	                  <div class="terminal-statusline">
+	                    <span id="remote-marquee" class="terminal-marquee">Initializing session bridge...</span>
+	                  </div>
+	                  <h1 id="remote-title">Connecting...</h1>
+	                  <p id="remote-target" class="terminal-subline">Waiting for a live Codex session.</p>
+	                </div>
+	              </div>
+	              <div class="button-row toolbar-strip remote-top-actions" aria-label="Remote controls">
+	                <button type="button" id="reply-toggle-button" class="command-button button-primary">Reply</button>
+          <button type="button" id="control-toggle-button" class="command-button panel-hidden" hidden>Take Control</button>
+	                <button type="button" id="refresh-button" class="command-button command-button-compact">Refresh</button>
+	              </div>
+	            </div>
+	            <p id="remote-scope-note" class="sync-note panel-hidden" hidden></p>
+	          </section>
+
+          <section class="terminal-panel remote-status-panel panel-hidden" id="remote-status-panel" hidden>
+            <div id="remote-operator-diagnostics" class="operator-diagnostics panel-hidden" hidden aria-live="polite"></div>
+            <p id="remote-ui-status" class="ui-status panel-hidden" aria-live="polite" hidden></p>
+          </section>
+
+          <section class="terminal-panel panel-emphasis panel-hidden" id="remote-action-panel" hidden>
+            <div class="section-head">
+              <div>
+                <p class="section-kicker">Pending</p>
+                <h2 id="remote-action-title">Action required</h2>
+              </div>
+              <span id="remote-action-kind" class="inline-status">Approval</span>
+            </div>
+            <div id="remote-action-card" class="terminal-block">No pending action.</div>
+            <div id="remote-action-control-gate" class="terminal-block panel-hidden" hidden>
+              <p class="composer-warning-copy">Take control to respond from remote.</p>
+              <div class="button-row">
+                <button type="button" id="remote-action-control-button" class="command-button button-primary">Take Control</button>
+              </div>
+            </div>
+            <form id="remote-action-form" class="stacked-form panel-hidden" hidden>
+              <div id="remote-action-questions" class="question-list"></div>
+              <div class="button-row">
+                <button type="submit" id="remote-action-submit" class="command-button button-primary">Submit</button>
+                <button type="button" id="remote-action-cancel" class="command-button">Cancel</button>
+              </div>
+            </form>
+            <div id="remote-action-buttons" class="button-row">
+              <button type="button" id="approve-button" class="command-button button-primary">Approve</button>
+              <button type="button" id="approve-session-button" class="command-button panel-hidden" hidden>Approve for session</button>
+              <button type="button" id="decline-button" class="command-button button-danger">Decline</button>
+            </div>
+          </section>
+
+          <section class="terminal-panel panel-emphasis composer-shell panel-hidden" id="composer-shell" hidden>
+            <div class="section-head">
+              <div>
+                <p class="section-kicker">Reply</p>
+                <h2>Reply</h2>
+              </div>
+              <span id="composer-target" class="inline-status">No live target</span>
+            </div>
+            <p id="composer-scope-note" class="sync-note">Pick a thread first.</p>
+            <form id="composer-form" class="stacked-form panel-hidden" hidden>
+              <textarea id="reply-text" rows="3" placeholder="Append to the selected live Codex thread"></textarea>
+              <div class="attachment-row">
+                <div id="dictation-indicator" class="dictation-indicator panel-hidden" hidden aria-live="polite">
+                  <div class="dictation-wave" aria-hidden="true">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </div>
+                  <span id="dictation-indicator-text" class="dictation-indicator-text">Hold to talk</span>
+                </div>
+                <div id="attachment-list" class="attachment-list panel-hidden" hidden></div>
+              </div>
+              <section id="composer-queue-shell" class="queue-shell panel-hidden" hidden>
+                <div class="queue-shell-head">
+                  <p class="queue-shell-label">Queue</p>
+                  <button type="button" id="clear-queue-button" class="command-button command-button-subtle command-button-compact">Clear</button>
+                </div>
+                <div id="composer-queue-list" class="queue-list"></div>
+              </section>
+              <div class="button-row composer-command-row">
+                <button type="button" id="composer-control-button" class="command-button panel-hidden" hidden>Take Control</button>
+                <button type="submit" id="send-reply-button" class="command-button button-primary">Steer Now</button>
+                <button type="button" id="queue-reply-button" class="command-button">Queue</button>
+                <button type="button" id="dictation-button" class="command-button attachment-picker dictation-button">
+                  <span class="dictation-button-copy">
+                    <span id="dictation-button-label" class="dictation-button-label">Dictate</span>
+                  </span>
+                </button>
+                <label class="command-button attachment-picker" for="reply-image-input">Add Image</label>
+                <input id="reply-image-input" class="attachment-input" type="file" accept="image/*" multiple>
+                <button type="button" id="composer-close-button" class="command-button">Close</button>
+              </div>
+            </form>
+            <p id="composer-status" class="composer-status">Ready</p>
+            <p id="composer-sync-note" class="sync-note panel-hidden" hidden></p>
+          </section>
+
+	          <section class="terminal-panel remote-feed-panel">
+	            <div class="section-head feed-head">
+	              <div class="feed-tools">
+	                <div class="filter-group" aria-label="Feed filters">
+	                  <button type="button" class="filter-button is-active" data-filter="updates">Updates</button>
+	                  <button type="button" class="filter-button is-active" data-filter="thread">Thread</button>
+	                  <button type="button" class="filter-button is-active" data-filter="tools">Tools</button>
+	                  <button type="button" class="filter-button is-active" data-filter="changes">Changes</button>
+	                </div>
+	                <button type="button" id="expand-all-button" class="command-button command-button-subtle command-button-compact">Expand all</button>
+	              </div>
+	            </div>
+	            <div class="feed-list" id="remote-feed"></div>
+          </section>
+        </section>
+      </section>
+    </main>
+    <script type="module" src="/remote.js"></script>
+  </body>
+</html>