@juspay/shooter 1.6.2 → 1.7.1

package/src/routes/+layout.svelte

@@ -6,7 +6,11 @@
   import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import { Icon, StatusBadge } from '$lib/modules/client/common';
+  import BellSvg from '$lib/assets/icons/bell.svg?raw';
+  import DashboardSvg from '$lib/assets/icons/dashboard.svg?raw';
+  import SettingsSvg from '$lib/assets/icons/settings.svg?raw';
+  import TerminalSvg from '$lib/assets/icons/terminal.svg?raw';
+  import { Button, Icon, Pill } from '@juspay/svelte-ui-components';
   import { onMount, type Snippet } from 'svelte';
 
   const { children, data }: { children: Snippet; data: LayoutData } = $props();
@@ -27,6 +31,19 @@
 
   let systemStatus = $state<'degraded' | 'error' | 'healthy' | 'unknown'>('unknown');
 
+  const statusLabels: Record<string, string> = {
+    degraded: 'Degraded',
+    error: 'Offline',
+    healthy: 'Online',
+    unknown: 'Checking',
+  };
+  const statusClasses: Record<string, string> = {
+    degraded: 'pill-status-degraded',
+    error: 'pill-status-offline',
+    healthy: 'pill-status-online',
+    unknown: 'pill-status-unknown',
+  };
+
   onMount(() => {
     void checkSystemStatus();
     const interval = setInterval(() => {
@@ -65,30 +82,19 @@
       </a>
 
       <div class="nav-right">
-        <StatusBadge status={systemStatus} />
-        <button
-          class="btn-gear {$page.url.pathname === '/config' ? 'btn-gear-active' : ''}"
+        <Pill
+          text={statusLabels[systemStatus] || 'Checking'}
+          classes={statusClasses[systemStatus] || 'pill-status-unknown'}
+        />
+        <Button
+          classes="btn-gear {$page.url.pathname === '/config' ? 'btn-gear-active' : ''}"
           onclick={(): void => {
             void goto('/config');
           }}
-          aria-label="Settings"
+          ariaLabel="Settings"
         >
-          <svg
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <circle cx="12" cy="12" r="3"></circle>
-            <path
-              d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
-            ></path>
-          </svg>
-        </button>
+          {#snippet icon()}<Icon svg={SettingsSvg} classes="icon-18" />{/snippet}
+        </Button>
       </div>
     </div>
   </header>
@@ -108,19 +114,7 @@
           $page.url.pathname.startsWith('/project') ||
           $page.url.pathname.startsWith('/session')}
       >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.8"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <rect x="3" y="3" width="7" height="7"></rect>
-          <rect x="14" y="3" width="7" height="7"></rect>
-          <rect x="3" y="14" width="7" height="7"></rect>
-          <rect x="14" y="14" width="7" height="7"></rect>
-        </svg>
+        <Icon svg={DashboardSvg} classes="icon-26" />
         <span>Dashboard</span>
       </a>
       <a
@@ -128,7 +122,7 @@
         class="tab-item"
         class:active={$page.url.pathname.startsWith('/activity')}
       >
-        <Icon name="bell" size={26} />
+        <Icon svg={BellSvg} classes="icon-26" />
         <span>Activity</span>
       </a>
       <a
@@ -136,17 +130,7 @@
         class="tab-item"
         class:active={$page.url.pathname.startsWith('/terminals')}
       >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.8"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <polyline points="4 17 10 11 4 5"></polyline>
-          <line x1="12" y1="19" x2="20" y2="19"></line>
-        </svg>
+        <Icon svg={TerminalSvg} classes="icon-26" />
         <span>Terminals</span>
       </a>
     </div>
@@ -160,30 +144,24 @@
     gap: var(--space-2);
   }
 
-  .btn-gear {
-    background: transparent;
-    color: var(--text-muted);
-    border: none;
-    padding: 0;
-    height: 36px;
-    width: 36px;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  :global(.btn-gear) {
+    --button-color: transparent;
+    --button-text-color: var(--text-muted);
+    --button-border: none;
+    --button-padding: 0;
+    --button-height: 36px;
+    --button-width: 36px;
+    --button-border-radius: var(--radius-md);
+    --button-hover-color: var(--component-bg);
+    --button-hover-text-color: var(--text-primary);
   }
-  .btn-gear:hover {
-    background: var(--component-bg);
-    color: var(--text-primary);
-  }
-  .btn-gear:focus-visible {
+  :global(.btn-gear:focus-visible) {
     outline: 2px solid var(--ds-green-700);
     outline-offset: 2px;
   }
-  .btn-gear-active {
-    background: var(--component-bg);
-    color: var(--text-primary);
+  :global(.btn-gear-active) {
+    --button-color: var(--component-bg);
+    --button-text-color: var(--text-primary);
   }
 
   .content-area {
@@ -234,17 +212,15 @@
   .tab-item.active {
     color: var(--ds-green-700);
   }
-  .tab-item :global(svg) {
-    width: 26px;
-    height: 26px;
+  .tab-item :global(.icon) {
     flex-shrink: 0;
   }
 
   /* Mobile: page headers stack vertically, buttons wrap */
   @media (max-width: 480px) {
-    .btn-gear {
-      height: 44px;
-      width: 44px;
+    :global(.btn-gear) {
+      --button-height: 44px;
+      --button-width: 44px;
     }
     .bottom-tabs {
       height: 60px;
@@ -255,14 +231,12 @@
       gap: 3px;
       min-height: 44px;
     }
-    .tab-item :global(svg) {
-      width: 24px;
-      height: 24px;
-    }
 
-    :global(.status-badge) {
+    :global(.pill-status-online),
+    :global(.pill-status-offline),
+    :global(.pill-status-degraded),
+    :global(.pill-status-unknown) {
       font-size: 10px;
-      padding: 0 8px;
       height: 22px;
     }
 

package/src/routes/+page.svelte

@@ -2,17 +2,18 @@
   import type { DashboardCard, ProjectGroup, ShooterConfig } from '$lib/types';
 
   import { goto } from '$app/navigation';
+  import BellSvg from '$lib/assets/icons/bell.svg?raw';
+  import RefreshSvg from '$lib/assets/icons/refresh.svg?raw';
+  import SettingsSvg from '$lib/assets/icons/settings.svg?raw';
   import {
     clearCache,
-    EmptyState,
     formatRelativeTime,
     getCached,
-    Icon,
     isShooterConfig,
     setCache,
   } from '$lib/modules/client/common';
   import { connect, DashboardView, disconnect, getCards } from '$lib/modules/client/dashboard';
-  import { Banner, Button, Pill, Shimmer } from '@juspay/svelte-ui-components';
+  import { Banner, Button, EmptyState, Icon, Pill, Shimmer } from '@juspay/svelte-ui-components';
   import { onDestroy, onMount } from 'svelte';
 
   const POLL_INTERVAL_MS = 10_000;
@@ -158,7 +159,7 @@
       </div>
       <div class="page-actions">
         <Button classes="btn-secondary" onclick={forceRefresh} disabled={loading}>
-          <Icon name="refresh" size={14} />
+          <Icon svg={RefreshSvg} classes="icon-14" />
           Refresh
         </Button>
       </div>
@@ -195,10 +196,10 @@
     </div>
   {:else if !config?.apiKey}
     <EmptyState
-      icon="settings"
       title="Configuration Required"
       description="Set up your API credentials to start tracking sessions"
     >
+      {#snippet icon()}<Icon svg={SettingsSvg} classes="icon-24" />{/snippet}
       <Button classes="btn-primary" onclick={navigateToConfig} text="Configure Settings" />
     </EmptyState>
   {:else}
@@ -223,10 +224,11 @@
       </div>
     {:else if totalSessionCount() === 0 && cards.length === 0}
       <EmptyState
-        icon="bell"
         title="No sessions yet"
         description="Claude Code sessions will appear here once JSONL files are found"
-      />
+      >
+        {#snippet icon()}<Icon svg={BellSvg} classes="icon-24" />{/snippet}
+      </EmptyState>
     {:else if projects.length > 0}
       {#if cards.length > 0}
         <h3 class="section-label">Sessions</h3>
@@ -263,36 +265,6 @@
 </main>
 
 <style>
-  .page-header {
-    margin-bottom: var(--space-6);
-  }
-
-  .page-header-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: var(--space-4);
-  }
-
-  .page-title {
-    font-size: var(--text-2xl);
-    font-weight: 700;
-    letter-spacing: -0.03em;
-    color: var(--text-primary);
-    margin-bottom: var(--space-1);
-  }
-
-  .page-description {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-
-  .page-actions {
-    display: flex;
-    gap: var(--space-2);
-    flex-shrink: 0;
-  }
-
   .stats-bar {
     display: flex;
     gap: 10px;
@@ -310,8 +282,8 @@
   }
 
   .stat-chip-active {
-    background: rgba(34, 197, 94, 0.1);
-    border-color: rgba(34, 197, 94, 0.25);
+    background: var(--ds-green-alpha-200);
+    border-color: var(--ds-green-alpha-400);
   }
 
   .stat-value {
@@ -321,7 +293,7 @@
   }
 
   .stat-chip-active .stat-value {
-    color: #22c55e;
+    color: var(--ds-green-500);
   }
 
   .stat-label {
@@ -350,23 +322,8 @@
   }
 
   @media (max-width: 768px) {
-    .page-header-content {
-      flex-direction: column;
-      gap: var(--space-4);
-    }
-
     .stats-bar {
       flex-wrap: wrap;
     }
   }
-
-  @media (max-width: 480px) {
-    .page-actions {
-      width: 100%;
-    }
-
-    .page-actions :global(button) {
-      flex: 1;
-    }
-  }
 </style>

package/src/routes/config/+page.svelte

@@ -2,16 +2,18 @@
   import type { ConfigPageData, NativeBridgeConfig, ShooterConfig } from '$lib/types';
 
   import { browser } from '$app/environment';
+  import AlertTriangleSvg from '$lib/assets/icons/alert-triangle.svg?raw';
+  import CheckCircleSvg from '$lib/assets/icons/check-circle.svg?raw';
+  import PlaySvg from '$lib/assets/icons/play.svg?raw';
+  import XCircleSvg from '$lib/assets/icons/x-circle.svg?raw';
   import {
-    Card,
     hasScanner,
-    Icon,
     isShooterConfig,
     scanQR,
     toErrorMessage,
   } from '$lib/modules/client/common';
   import { PROVIDERS } from '$lib/modules/client/neurolink/provider-config';
-  import { Banner, Button, Input, Stepper } from '@juspay/svelte-ui-components';
+  import { Banner, Button, Card, Icon, Input, Stepper } from '@juspay/svelte-ui-components';
   import { onMount } from 'svelte';
 
   const { data }: { data: ConfigPageData } = $props();
@@ -398,15 +400,15 @@
         </Card>
 
         {#if result}
-          {@const bannerIcon =
+          {@const bannerSvg =
             statusType === 'success'
-              ? 'check-circle'
+              ? CheckCircleSvg
               : statusType === 'error'
-                ? 'x-circle'
-                : 'alert-triangle'}
+                ? XCircleSvg
+                : AlertTriangleSvg}
           <Banner text={result} classes="banner-{statusType || 'info'}">
             {#snippet icon()}
-              <Icon name={bannerIcon} size={16} />
+              <Icon svg={bannerSvg} classes="icon-16" />
             {/snippet}
           </Banner>
         {/if}
@@ -418,7 +420,7 @@
             disabled={loading || !apiKey.trim()}
           >
             {#if !loading}
-              <Icon name="play" size={14} />
+              <Icon svg={PlaySvg} classes="icon-14" />
             {/if}
             Test Connection
           </Button>
@@ -501,8 +503,8 @@
             {#each PROVIDERS as provider (provider.id)}
               <div class="provider-row">
                 <Icon
-                  name={data.aiProviders[provider.id] ? 'check-circle' : 'x-circle'}
-                  size={14}
+                  svg={data.aiProviders[provider.id] ? CheckCircleSvg : XCircleSvg}
+                  classes="icon-14"
                 />
                 <span class="provider-label">{provider.label}</span>
                 <span class="provider-status" class:configured={data.aiProviders[provider.id]}>
@@ -545,23 +547,6 @@
     padding-bottom: var(--space-6);
   }
 
-  .page-header {
-    margin-bottom: var(--space-8);
-  }
-
-  .page-title {
-    font-size: var(--text-2xl);
-    font-weight: 600;
-    letter-spacing: -0.03em;
-    color: var(--text-primary);
-    margin-bottom: var(--space-1);
-  }
-
-  .page-description {
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-  }
-
   .settings-grid {
     display: grid;
     grid-template-columns: 1fr 320px;

package/src/routes/project/+page.svelte

@@ -3,16 +3,17 @@
 
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
+  import AlertTriangleSvg from '$lib/assets/icons/alert-triangle.svg?raw';
+  import BellSvg from '$lib/assets/icons/bell.svg?raw';
+  import RefreshSvg from '$lib/assets/icons/refresh.svg?raw';
   import {
     clearCache,
-    EmptyState,
     formatRelativeTime,
     getCached,
-    Icon,
     isShooterConfig,
     setCache,
   } from '$lib/modules/client/common';
-  import { Banner, Button, Pill, Shimmer } from '@juspay/svelte-ui-components';
+  import { Banner, Button, EmptyState, Icon, Pill, Shimmer } from '@juspay/svelte-ui-components';
   import { onDestroy, onMount } from 'svelte';
 
   const POLL_INTERVAL_MS = 15_000;
@@ -246,16 +247,17 @@
       </a>
     </div>
     <EmptyState
-      icon="alert-triangle"
       title="Project Not Found"
       description="The requested project could not be found."
-    />
+    >
+      {#snippet icon()}<Icon svg={AlertTriangleSvg} classes="icon-24" />{/snippet}
+    </EmptyState>
   {:else}
     <div class="chat-session-header">
       <div class="chat-session-header-top">
         <a href="/" class="back-link">&#8592; Back to Projects</a>
         <Button classes="btn-secondary" onclick={forceRefresh} disabled={loading}>
-          <Icon name="refresh" size={14} />
+          <Icon svg={RefreshSvg} classes="icon-14" />
           Refresh
         </Button>
       </div>
@@ -268,10 +270,11 @@
 
     {#if project.sessions.length === 0}
       <EmptyState
-        icon="bell"
         title="No sessions yet"
         description="Sessions for this project will appear here"
-      />
+      >
+        {#snippet icon()}<Icon svg={BellSvg} classes="icon-24" />{/snippet}
+      </EmptyState>
     {:else}
       <div class="sessions-container">
         {#each visibleSessions as session (session.id)}
@@ -377,7 +380,7 @@
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: #4ade80;
+    background: var(--ds-green-500);
     margin-right: 2px;
     flex-shrink: 0;
   }

package/src/routes/session/[id]/+page.svelte

@@ -12,7 +12,7 @@
   import { page } from '$app/state';
   import { getCached, setCache } from '$lib/modules/client/common';
   import ChatView from '$lib/modules/client/terminal/ChatView.svelte';
-  import { Shimmer } from '@juspay/svelte-ui-components';
+  import { Button, Shimmer } from '@juspay/svelte-ui-components';
   import { onMount } from 'svelte';
 
   // --- State ---
@@ -584,9 +584,12 @@
     <div class="session-chat-container">
       {#if hasMoreMessages}
         <div class="load-earlier-row">
-          <button class="load-earlier-btn" onclick={loadEarlierMessages} disabled={loadingMore}>
-            {loadingMore ? 'Loading...' : 'Load earlier messages'}
-          </button>
+          <Button
+            text={loadingMore ? 'Loading...' : 'Load earlier messages'}
+            classes="btn-ghost btn-sm"
+            disabled={loadingMore}
+            onclick={loadEarlierMessages}
+          />
         </div>
       {/if}
       <ChatView
@@ -644,18 +647,8 @@
 
   .resume-status {
     font-size: 0.75rem;
-    color: var(--text-tertiary, #888);
-    animation: pulse 1.5s ease-in-out infinite;
-  }
-
-  @keyframes pulse {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.4;
-    }
+    color: var(--text-tertiary);
+    animation: pulse-dot 1.5s ease-in-out infinite;
   }
 
   .connection-dot {
@@ -667,12 +660,12 @@
   }
 
   .connection-dot.connected {
-    background: #4ade80;
+    background: var(--ds-green-500);
   }
 
   .connection-dot.reconnecting {
-    background: #f59e0b;
-    animation: pulse 1s ease-in-out infinite;
+    background: var(--ds-amber-700);
+    animation: pulse-dot 1s ease-in-out infinite;
   }
 
   /* Chat container fills remaining space */
@@ -692,23 +685,4 @@
     border-bottom: 1px solid var(--border);
   }
 
-  .load-earlier-btn {
-    font-size: 0.8rem;
-    color: var(--text-secondary);
-    background: none;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm, 4px);
-    padding: 4px 12px;
-    cursor: pointer;
-  }
-
-  .load-earlier-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .load-earlier-btn:hover:not(:disabled) {
-    color: var(--text-primary);
-    border-color: var(--text-tertiary, #888);
-  }
 </style>