Feat/franlol subagents in the sidebar

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -293,6 +293,13 @@ export function Session() {
     }
   }
 
+  function goToParent() {
+    const parentID = session()?.parentID
+    if (parentID) {
+      navigate({ type: "session", sessionID: parentID })
+    }
+  }
+
   const command = useCommandDialog()
   command.register(() => [
     ...(sync.data.config.share !== "disabled"
@@ -815,15 +822,9 @@ export function Session() {
       value: "session.parent",
       keybind: "session_parent",
       category: "Session",
-      disabled: true,
+      disabled: !session()?.parentID,
       onSelect: (dialog) => {
-        const parentID = session()?.parentID
-        if (parentID) {
-          navigate({
-            type: "session",
-            sessionID: parentID,
-          })
-        }
+        goToParent()
         dialog.clear()
       },
     },

packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx

@@ -1,19 +1,21 @@
 import { useSync } from "@tui/context/sync"
-import { createMemo, For, Show, Switch, Match } from "solid-js"
+import { createMemo, For, Show, Switch, Match, createSignal, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useTheme } from "../../context/theme"
+import { useRoute } from "../../context/route"
 import { Locale } from "@/util/locale"
 import path from "path"
-import type { AssistantMessage } from "@opencode-ai/sdk/v2"
+import type { AssistantMessage } from "@opencode-ai/sdk"
+import type { AssistantMessage as AssistantMessageV2, ToolPart } from "@opencode-ai/sdk/v2"
 import { Global } from "@/global"
 import { Installation } from "@/installation"
-import { useKeybind } from "../../context/keybind"
 import { useDirectory } from "../../context/directory"
 import { useKV } from "../../context/kv"
 import { TodoItem } from "../../component/todo-item"
 
 export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
   const sync = useSync()
+  const route = useRoute()
   const { theme } = useTheme()
   const session = createMemo(() => sync.session.get(props.sessionID)!)
   const diff = createMemo(() => sync.data.session_diff[props.sessionID] ?? [])
@@ -25,11 +27,43 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
     diff: true,
     todo: true,
     lsp: true,
+    subagents: true,
   })
 
+  // Animated spinner
+  const spinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+  const [spinnerIndex, setSpinnerIndex] = createSignal(0)
+
+  const intervalId = setInterval(() => {
+    setSpinnerIndex((prev) => (prev + 1) % spinnerFrames.length)
+  }, 100)
+  onCleanup(() => clearInterval(intervalId))
+
   // Sort MCP servers alphabetically for consistent display order
   const mcpEntries = createMemo(() => Object.entries(sync.data.mcp).sort(([a], [b]) => a.localeCompare(b)))
 
+  const taskToolParts = createMemo(() => {
+    const parts: ToolPart[] = []
+    for (const message of messages()) {
+      for (const part of sync.data.part[message.id] ?? []) {
+        if (part.type === "tool" && part.tool === "task") parts.push(part)
+      }
+    }
+    return parts
+  })
+
+  const subagentGroups = createMemo(() => {
+    const groups = new Map<string, ToolPart[]>()
+    for (const part of taskToolParts()) {
+      const input = part.state.input as Record<string, unknown>
+      const agentName = input?.subagent_type as string
+      if (!agentName) continue
+      if (!groups.has(agentName)) groups.set(agentName, [])
+      groups.get(agentName)!.push(part)
+    }
+    return Array.from(groups.entries())
+  })
+
   // Count connected and error MCP servers for collapsed header display
   const connectedMcpCount = createMemo(() => mcpEntries().filter(([_, item]) => item.status === "connected").length)
   const errorMcpCount = createMemo(
@@ -158,6 +192,73 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
                 </Show>
               </box>
             </Show>
+            <Show when={subagentGroups().length > 0}>
+              <box>
+                <box
+                  flexDirection="row"
+                  gap={1}
+                  onMouseDown={() => subagentGroups().length > 2 && setExpanded("subagents", !expanded.subagents)}
+                >
+                  <Show when={subagentGroups().length > 2}>
+                    <text fg={theme.text}>{expanded.subagents ? "▼" : "▶"}</text>
+                  </Show>
+                  <text fg={theme.text}>
+                    <b>Subagents</b>
+                  </text>
+                </box>
+                <Show when={subagentGroups().length <= 2 || expanded.subagents}>
+                  <For each={subagentGroups()}>
+                    {([agentName, parts]) => {
+                      const hasActive = () =>
+                        parts.some((p) => p.state.status === "running" || p.state.status === "pending")
+                      return (
+                        <box>
+                          <box flexDirection="row" gap={1}>
+                            <text flexShrink={0} style={{ fg: hasActive() ? theme.success : theme.text }}>
+                              •
+                            </text>
+                            <text fg={theme.text} wrapMode="word">
+                              {agentName}
+                            </text>
+                          </box>
+                          <For each={parts}>
+                            {(part) => {
+                              const isActive = () => part.state.status === "running" || part.state.status === "pending"
+                              const isError = () => part.state.status === "error"
+                              const input = part.state.input as Record<string, unknown>
+                              const description = (input?.description as string) ?? ""
+                              const stateMetadata = (part.state as { metadata?: Record<string, unknown> }).metadata
+                              const sessionId = (part.metadata?.sessionId ?? stateMetadata?.sessionId) as
+                                | string
+                                | undefined
+                              return (
+                                <box
+                                  flexDirection="row"
+                                  gap={1}
+                                  paddingLeft={2}
+                                  onMouseUp={(e) => {
+                                    if (e.button === 0 && sessionId) {
+                                      route.navigate({ type: "session", sessionID: sessionId })
+                                    }
+                                  }}
+                                >
+                                  <text flexShrink={0} fg={isActive() ? theme.success : theme.textMuted}>
+                                    {isActive() ? spinnerFrames[spinnerIndex()] : isError() ? "✗" : "✓"}
+                                  </text>
+                                  <text fg={isActive() ? theme.text : theme.textMuted} wrapMode="word">
+                                    {description}
+                                  </text>
+                                </box>
+                              )
+                            }}
+                          </For>
+                        </box>
+                      )
+                    }}
+                  </For>
+                </Show>
+              </box>
+            </Show>
             <box>
               <box
                 flexDirection="row"