release/v5.7.0

[code-crusher]

• feat: add command execution timer with running/completed status
• remove axon 1 model
• feat: update chat UI components
• clean up UI

[matter-ai-bot]

Context

Summary By MatterAI

🔄 What Changed

Released version 5.7.0. Key updates include real-time command execution timing, PID visibility, and an abort button for terminal tasks. Introduced credit usage monitoring with proactive exhaustion warnings (at 98% usage) and a redesigned "Out of Credits" UI. Cleaned up deprecated model definitions in the provider configurations.

🔍 Impact of the Change

Users gain better visibility into long-running terminal commands and the ability to terminate them directly. The credit monitoring system prevents unexpected service interruptions by alerting users when they are near their limit, improving the overall UX and billing transparency.

📁 Total Files Changed

Click to Expand

File	ChangeLog
Terminal Schema packages/types/src/terminal.ts	Added optional startTime to terminal status schema for duration tracking.
Model Cleanup src/api/providers/kilocode-models.ts	Removed deprecated model definitions to streamline provider options.
Execution Tracking src/core/tools/executeCommandTool.ts	Captures startTime on shell start and broadcasts it to the webview.
Version Bump src/package.json	Incremented extension version to 5.7.0.
UI Refinement webview-ui/src/components/chat/ChatRow.tsx	Redesigned the credit exhaustion message for better visual integration.
Usage Monitoring webview-ui/src/components/chat/ChatView.tsx	Implemented profile data fetching and usage-based warning notifications.
Command Timer webview-ui/src/components/chat/CommandExecution.tsx	Added live running timer, final duration display, and abort functionality.
Style Tweak webview-ui/src/components/kilocode/StickyUserMessage.tsx	Adjusted margin and layout for sticky user messages.
Provider Sync webview-ui/src/components/ui/hooks/useOpenRouterModelProviders.ts	Removed models to maintain parity with backend provider changes.
Button Styling webview-ui/src/index.css	Added specific border styles for the code review button component.

🧪 Test Added/Recommended

Recommended

• Unit Test: Verify CommandExecution.tsx correctly calculates elapsed time across different timezones.
• Integration Test: Ensure fetchProfileDataRequest is triggered only once when kilocodeToken is present.
• UI Test: Validate that the "Out of Credits" banner appears exactly at 98% usage.

🔒 Security Vulnerabilities

N/A - No sensitive data exposure or injection risks identified in this change.

Implementation

• Updated Zod schemas to include startTime for terminal operations.
• Modified executeCommandTool to inject Date.now() into the execution status payload.
• Built a React timer using setInterval in CommandExecution to provide live feedback.
• Integrated a message listener in ChatView to handle profileDataResponse and manage usage state.

Screenshots

before	after
N/A	N/A

How to Test

• Execute a terminal command (e.g., npm install) and verify the "Running Command for Xs" timer appears.
• Click the 'X' (OctagonX) button to verify the command aborts correctly.
• Mock a profile response with usagePercentage: 99 and verify the "Out of Credits" banner displays in the chat view.

Get in Touch

• Axon Code Discord: @engineering_lead

⏳ Estimated code review effort

MEDIUM (~20 minutes)

Tip

Quality Recommendations

1. Centralize the 'Out of Credits' banner into a shared component to reduce duplication between ChatRow and ChatView.

2. Use performance.now() for the startTime if sub-millisecond precision is required for logs, though Date.now() is sufficient for the UI timer.

3. Add a cleanup for the profile data state when the user logs out or the token changes to prevent stale usage data display.

♫ Tanka Poem

The clock starts to tick, ⏱️
Shell commands run in the light, 💻
Credits fade away. 📉
A warning glows on the screen, ⚠️
Control returns to the hand. 🛑

Sequence Diagram

sequenceDiagram
    participant Tool as executeCommandTool
    participant Host as Extension Host
    participant View as ChatView
    participant Cmd as CommandExecution
    
    Tool->>Tool: startTime = Date.now()
    Tool->>Host: postMessage(commandExecutionStatus: "started", startTime, pid)
    Host->>View: message(type: "commandExecutionStatus")
    View->>Cmd: props(status)
    
    Note over Cmd: useEffect starts timer
    Cmd->>Cmd: setInterval(update elapsedSeconds)
    
    View->>Host: postMessage(type: "fetchProfileDataRequest")
    Host-->>View: message(type: "profileDataResponse", payload)
    
    alt usagePercentage >= 98
        Note over View: Render "Out of Credits" Banner
    end
    
    Cmd->>Host: postMessage(type: "terminalOperation", terminalOperation: "abort")

Loading

[matter-ai-bot]

🧪 PR Review is completed: The PR successfully implements command execution duration tracking and adds the new 'Out of Credits' UI. A few minor improvements can be made to ensure backward compatibility and prevent potential React rendering bugs.

⬇️ Low Priority Suggestions (1)

webview-ui/src/components/chat/CommandExecution.tsx (1 suggestion)

Location: webview-ui/src/components/chat/CommandExecution.tsx (Lines 198-200)

🟡 React Bug

Issue: In React, using && with a number can render 0 in the DOM if the number evaluates to 0. While PIDs are typically greater than 0, it's safer to explicitly check for undefined or null to prevent unintended UI artifacts.

Fix: Change the condition to status.pid !== undefined.

Impact: Prevents potential rendering of 0 in the UI.

-  								{status.pid && (
-  									<span className="font-mono text-xs opacity-70">(PID: {status.pid})</span>
-  								)}
+  								{status.pid !== undefined && (
+  									<span className="font-mono text-xs opacity-70">(PID: {status.pid})</span>
+  								)}

[matter-ai-bot]

🟡 Logic Improvement

Issue: If data.startTime is undefined (e.g., from an older backend version or missing data), startTimeRef.current becomes null. This prevents the timer from starting, causing the UI to display Running Command for 0s indefinitely.

Fix: Fallback to Date.now() if data.startTime is not provided to ensure the timer always functions.

Impact: Improves backward compatibility and ensures the timer UI always works.

Suggested change

	startTimeRef.current = data.startTime ?? null
	startTimeRef.current = data.startTime ?? Date.now()