Skip to content

Conversation

@TechWizard9999
Copy link
Contributor

@TechWizard9999 TechWizard9999 commented Feb 1, 2026

Shows a clear purple indicator with skill name in the session view when a skill is triggered.

Closes #274

Approach

  • Use existing SDK signals: Detect skills via tool call tool === "skill"
  • Lightweight state derivation: activeSkill() memo reads tool metadata/title for skill name
  • Minimal UI touch: Reuse existing skill visual language (purple badge + Sparkles icon)
  • Status clarity: Map skill tool to "Using skill" in run status

Changes

  • packages/app/src/app/pages/session.tsx - Added skill indicator logic and UI
  • packages/app/src/app/app.tsx - Fixed undefined isDemoMode() reference

Testing

Build Verification

  • TypeScript compiles - pnpm typecheck passes with no errors
  • Production build succeeds - pnpm build:ui completes successfully

Manual Testing

  • Dev server runs - pnpm dev:ui starts without errors
  • No console errors - Browser console is clean on page load
  • UI renders correctly - Session view loads and displays properly

Code Review

  • Follows existing patterns - Uses same purple styling as skill badges
  • No breaking changes - Only additive changes
  • Type-safe - Passes TypeScript strict mode

@github-actions
Copy link
Contributor

github-actions bot commented Feb 1, 2026

The following comment was made by an LLM, it may be inaccurate:

@benjaminshafii
Copy link
Member

would appreciate a small gif screenshot to help get this in faster (+ seems there's a merge conflict)

thx for the pr!

@TechWizard9999
Copy link
Contributor Author

TechWizard9999 commented Feb 1, 2026

Hi @benjaminshafii ,

I have updated and verified it also resolved merge conflict

  1. Indicator Appearance: The purple skill indicator (✨ Using skill) appears in the bottom status area when a skill is triggered.
  2. State Logic: The indicator correctly shows Using skill only while the tool is actually executing. As soon as execution finishes which is (Fast), it transitions to Responding.
  3. Visuals: The purple background and sparkles icon match the skill UI language.

I've attached a recording showing the indicator and the screenshot

GIF:
ScreenRecording2026-02-01at6 25 24PM-ezgif com-optimize

ScreenShot:
Screenshot 2026-02-01 at 6 17 25 PM

Please check this and let me know if you want any changes

@TechWizard9999
Copy link
Contributor Author

Hi @benjaminshafii ,
Could you review this I have added the gif and the screen shot ,
Please let me know if anything is there

@TechWizard9999
Copy link
Contributor Author

Hi @benjaminshafii ,
Could you check this if possible

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Session view: clearly surface when a skill is triggered

2 participants