From c9f86c2fd36861d21013c0d468a1489c812b9d99 Mon Sep 17 00:00:00 2001
From: Roopesh <roopesh1724989@gmail.com>
Date: Wed, 4 Feb 2026 18:05:14 +0530
Subject: [PATCH] Show skill indicator in session view when a skill is
 triggered

---
 packages/app/src/app/pages/session.tsx | 31 +++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/app/pages/session.tsx b/packages/app/src/app/pages/session.tsx
index 056b2a74..9298c82d 100644
--- a/packages/app/src/app/pages/session.tsx
+++ b/packages/app/src/app/pages/session.tsx
@@ -23,7 +23,7 @@ import type {
 
 import type { WorkspaceInfo } from "../lib/tauri";
 
-import { ArrowRight, ChevronDown, HardDrive, Shield, Zap } from "lucide-solid";
+import { ArrowRight, ChevronDown, HardDrive, Shield, Sparkles, Zap } from "lucide-solid";
 
 import Button from "../components/button";
 import RenameSessionModal from "../components/rename-session-modal";
@@ -408,6 +408,8 @@ export default function SessionView(props: SessionViewProps) {
       const record = part as any;
       const tool = typeof record.tool === "string" ? record.tool : "";
       switch (tool) {
+        case "skill":
+          return "Using skill";
         case "task":
           return "Delegating";
         case "todowrite":
@@ -481,6 +483,18 @@ export default function SessionView(props: SessionViewProps) {
     return null;
   });
 
+  const activeSkill = createMemo<string | null>(() => {
+    const part = latestRunPart();
+    if (!part || part.type !== "tool") return null;
+    const record = part as any;
+    const tool = typeof record.tool === "string" ? record.tool : "";
+    if (tool !== "skill") return null;
+    const state = record.state ?? {};
+    const title = typeof state.title === "string" ? state.title : "";
+    const skillName = state.metadata?.name || title.replace(/^Loaded skill:\s*/i, "").trim();
+    return skillName || "skill";
+  });
+
   const runLabel = createMemo(() => {
     switch (runPhase()) {
       case "sending":
@@ -1398,7 +1412,10 @@ export default function SessionView(props: SessionViewProps) {
                 <div class="flex justify-start pl-2">
                   <div class="w-full max-w-[68ch] space-y-2">
                     <Show when={thinkingStatus()}>
-                      <div class="rounded-xl border border-gray-6/70 bg-gray-2/40 px-3 py-2 text-xs text-gray-11">
+                      <div class={`rounded-xl border px-3 py-2 text-xs text-gray-11 ${activeSkill()
+                          ? "border-purple-6/70 bg-purple-2/40"
+                          : "border-gray-6/70 bg-gray-2/40"
+                        }`}>
                         <button
                           type="button"
                           class="w-full flex items-center justify-between gap-3 text-left"
@@ -1406,7 +1423,15 @@ export default function SessionView(props: SessionViewProps) {
                           aria-expanded={thinkingExpanded()}
                         >
                           <div class="flex items-center gap-2 min-w-0">
-                            <span class="text-[10px] uppercase tracking-wide text-gray-9">Thinking</span>
+                            <Show
+                              when={activeSkill()}
+                              fallback={<span class="text-[10px] uppercase tracking-wide text-gray-9">Thinking</span>}
+                            >
+                              <Sparkles size={12} class="text-purple-10 shrink-0" />
+                              <span class="text-[10px] px-1.5 py-0.5 rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300 shrink-0">
+                                {activeSkill()}
+                              </span>
+                            </Show>
                             <span class="truncate text-gray-12">{thinkingStatus()}</span>
                           </div>
                           <ChevronDown