feat: simplify message steps display and enhance timing system

.github/workflows/build-desktop.yml

@@ -26,6 +26,11 @@ jobs:
         with:
           version: 10.27.0
 
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: "1.3.6"
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 

.gitignore

@@ -23,3 +23,7 @@ vendor/opencode/
 # OpenCode local deps
 .opencode/node_modules/
 .opencode/bun.lock
+
+# Local notes
+CLAUDE.md
+openwork_security_audit.md

packages/app/src/app/app.tsx

@@ -617,6 +617,7 @@ export default function App() {
     selectedSession,
     selectedSessionStatus,
     messages,
+    messageTimings,
     todos,
     pendingPermissions,
     permissionReplyBusy,
@@ -627,6 +628,7 @@ export default function App() {
     selectSession,
     renameSession,
     respondPermission,
+    markSessionEndReason,
     setSessions,
     setSessionStatusById,
     setMessages,
@@ -808,6 +810,23 @@ export default function App() {
     }
   }
 
+  async function cancelRun() {
+    const c = client();
+    const sessionID = selectedSessionId();
+    if (!c || !sessionID) return;
+
+    try {
+      markSessionEndReason(sessionID, "interrupted");
+      setBusy(false);
+      setBusyLabel(null);
+      setBusyStartedAt(null);
+      await c.session.abort({ sessionID });
+    } catch (e) {
+      const message = e instanceof Error ? e.message : safeStringify(e);
+      setError(message);
+    }
+  }
+
   async function renameSessionTitle(sessionID: string, title: string) {
     const trimmed = title.trim();
     if (!trimmed) {
@@ -4168,6 +4187,7 @@ export default function App() {
     })),
     selectSession: selectSession,
     messages: activeMessages(),
+    messageTimings: messageTimings(),
     todos: activeTodos(),
     busyLabel: busyLabel(),
     developerMode: developerMode(),
@@ -4184,6 +4204,7 @@ export default function App() {
     busy: busy(),
     prompt: prompt(),
     setPrompt: setPrompt,
+    cancelRun: cancelRun,
     activePermission: activePermissionMemo(),
     permissionReplyBusy: permissionReplyBusy(),
     respondPermission: respondPermission,

packages/app/src/app/components/session/composer.tsx

@@ -1,6 +1,6 @@
 import { For, Show, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 import type { Agent } from "@opencode-ai/sdk/v2/client";
-import { ArrowRight, AtSign, ChevronDown, File, Paperclip, X, Zap } from "lucide-solid";
+import { ArrowRight, AtSign, ChevronDown, File, Paperclip, Square, X, Zap } from "lucide-solid";
 
 import type { ComposerAttachment, ComposerDraft, ComposerPart, PromptMode } from "../../types";
 
@@ -28,6 +28,7 @@ type ComposerProps = {
   busy: boolean;
   onSend: (draft: ComposerDraft) => void;
   onDraftChange: (draft: ComposerDraft) => void;
+  onCancel: () => void;
   commandMatches: CommandItem[];
   onRunCommand: (commandId: string) => void;
   onInsertCommand: (commandId: string) => void;
@@ -1162,18 +1163,31 @@ export default function Composer(props: ComposerProps) {
                         <Paperclip size={16} />
                       </button>
 
-                      <button
-                        disabled={!props.prompt.trim() && !attachments().length}
-                        onClick={sendDraft}
-                        class={`p-2 rounded-xl transition-all shadow-lg shrink-0 flex items-center justify-center ${
-                          !props.prompt.trim() && !attachments().length
-                            ? "bg-gray-4 text-gray-8 cursor-not-allowed"
-                            : "bg-gray-12 text-gray-1 hover:scale-105 active:scale-95"
-                        }`}
-                        title="Run"
+                      <Show
+                        when={props.busy}
+                        fallback={
+                          <button
+                            disabled={!props.prompt.trim() && !attachments().length}
+                            onClick={sendDraft}
+                            class={`p-2 rounded-xl transition-all shadow-lg shrink-0 flex items-center justify-center ${
+                              !props.prompt.trim() && !attachments().length
+                                ? "bg-gray-4 text-gray-8 cursor-not-allowed opacity-30"
+                                : "bg-gray-12 text-gray-1 hover:scale-105 active:scale-95"
+                            }`}
+                            title="Run"
+                          >
+                            <ArrowRight size={18} />
+                          </button>
+                        }
                       >
-                        <ArrowRight size={18} />
-                      </button>
+                        <button
+                          onClick={props.onCancel}
+                          class="p-2 bg-red-9 text-white rounded-xl hover:bg-red-10 hover:scale-105 active:scale-95 transition-all shadow-lg shrink-0 flex items-center justify-center"
+                          title="Stop"
+                        >
+                          <Square size={16} fill="currentColor" />
+                        </button>
+                      </Show>
                     </div>
                   </div>
                 </div>