feat: simplify message steps display and enhance timing system

.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

@@ -256,6 +256,7 @@ export default function App() {
     selectedSession,
     selectedSessionStatus,
     messages,
+    messageTimings,
     todos,
     pendingPermissions,
     permissionReplyBusy,
@@ -266,6 +267,7 @@ export default function App() {
     selectSession,
     renameSession,
     respondPermission,
+    markSessionEndReason,
     setSessions,
     setSessionStatusById,
     setMessages,
@@ -434,6 +436,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) {
@@ -2832,6 +2851,7 @@ export default function App() {
     })),
     selectSession: isDemoMode() ? selectDemoSession : selectSession,
     messages: activeMessages(),
+    messageTimings: isDemoMode() ? {} : messageTimings(),
     todos: activeTodos(),
     busyLabel: busyLabel(),
     developerMode: developerMode(),
@@ -2848,6 +2868,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 } 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;
@@ -1146,14 +1147,27 @@ export default function Composer(props: ComposerProps) {
                         <Paperclip size={16} />
                       </button>
 
-                      <button
-                        disabled={!props.prompt.trim() && !attachments().length}
-                        onClick={sendDraft}
-                        class="p-2 bg-gray-12 text-gray-1 rounded-xl hover:scale-105 active:scale-95 transition-all disabled:opacity-0 disabled:scale-75 shadow-lg shrink-0 flex items-center justify-center"
-                        title="Run"
+                      <Show
+                        when={props.busy}
+                        fallback={
+                          <button
+                            disabled={!props.prompt.trim() && !attachments().length}
+                            onClick={sendDraft}
+                            class="p-2 bg-gray-12 text-gray-1 rounded-xl hover:scale-105 active:scale-95 transition-all disabled:opacity-30 shadow-lg shrink-0 flex items-center justify-center"
+                            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>