fix(console): show external link icon on profile sidebar shortcuts

The Usage and Buy Credits items in the Kilo Console profile sidebar
open in a new tab but had no visual indicator, so users could not tell
they navigate out of the app. Add an external-link icon to those items
and to the Open Dashboard primary CTA in the profile header.

The shared console-shell sidebar style hides every [data-component=icon]
inside a config-top-option, so a new modifier class is introduced to
re-enable the icon and push it to the right of the label. The primary
CTA's inner SVG is forced to --primary-foreground via a higher-
specificity override so it remains readable on the yellow button.

.changeset/console-profile-external-link-icons.md

@@ -0,0 +1,5 @@
+---
+"@kilocode/kilo-web-ui": patch
+---
+
+Show trailing external-link icons for Kilo Console profile links that open in a new tab.

packages/kilo-console/src/routes/profile/ProfileRoute.tsx

@@ -1,6 +1,7 @@
 import { A, useLocation, useNavigate } from "@solidjs/router"
 import { Button } from "@kilocode/kilo-web-ui/button"
 import { Card } from "@kilocode/kilo-web-ui/card"
+import { Icon } from "@kilocode/kilo-web-ui/icon"
 import { createEffect, createMemo, createResource, createSignal, For, Show } from "solid-js"
 import { LoadingScreen } from "../../components/LoadingScreen"
 import { loadKiloProfile, logoutKilo, setKiloOrganization, type KiloProfileData, type ProjectQuery } from "../../client"
@@ -137,11 +138,13 @@ export function ProfileRoute() {
             <A class="config-top-option active" href={overview()} aria-current="page">
               <span>Overview</span>
             </A>
-            <a class="config-top-option" href={usageUrl()} target="_blank" rel="noreferrer">
+            <a class="config-top-option config-top-option-external" href={usageUrl()} target="_blank" rel="noreferrer">
               <span>Usage</span>
+              <Icon name="square-arrow-top-right" size="small" />
             </a>
-            <a class="config-top-option" href={creditsUrl()} target="_blank" rel="noreferrer">
+            <a class="config-top-option config-top-option-external" href={creditsUrl()} target="_blank" rel="noreferrer">
               <span>Buy Credits</span>
+              <Icon name="square-arrow-top-right" size="small" />
             </a>
           </nav>
         </aside>
@@ -169,6 +172,7 @@ export function ProfileRoute() {
                   rel="noreferrer"
                 >
                   Open Dashboard
+                  <Icon name="square-arrow-top-right" size="small" />
                 </a>
               </div>
             </header>

packages/kilo-console/src/styles/profile.css

@@ -60,6 +60,10 @@
   text-decoration: none;
 }
 
+.kilo-console .profile-primary-link[data-component="button"][data-variant="primary"] [data-slot="icon-svg"] {
+  color: var(--primary-foreground);
+}
+
 .kilo-console .profile-connect-card {
   display: grid;
   min-height: 18rem;

packages/kilo-web-ui/src/styles/console-shell.css

@@ -596,6 +596,18 @@
   display: none;
 }
 
+.kilo-console .config-top-option-external {
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.kilo-console .config-top-option-external [data-component="icon"] {
+  display: inline-flex;
+  align-items: center;
+  color: var(--text-weaker);
+  flex: none;
+}
+
 .kilo-console .config-group-items {
   display: flex;
   flex-direction: column;