@juspay/shooter 1.6.1 → 1.7.0

package/src/lib/modules/client/terminal/LaunchSheet.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import type { CreateTerminalResponse, LaunchSheetProps, Preset } from '$lib/types';
 
-  import { Banner, Button, Choicebox, Input, Select } from '@juspay/svelte-ui-components';
+  import { Banner, Button, Choicebox, Input, Select, Sheet } from '@juspay/svelte-ui-components';
   import { onMount } from 'svelte';
 
-  const { apiKey, onClose, onLaunch, open }: LaunchSheetProps = $props();
+  // eslint-disable-next-line prefer-const -- open is mutated via bind:open from parent
+  let { apiKey, onClose, onLaunch, open = $bindable(false) }: LaunchSheetProps = $props();
 
   const presets: Preset[] = [
     { args: [], command: 'claude', label: 'Claude Code' },
@@ -107,174 +108,103 @@
     }
   }
 
-  function handleBackdropClick(event: MouseEvent): void {
-    if (event.target === event.currentTarget) {
-      onClose();
-    }
-  }
 
-  function handleKeydown(event: KeyboardEvent): void {
-    if (!open) {
-      return;
-    }
-    if (event.key === 'Escape') {
-      onClose();
-    }
-  }
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-{#if open}
-  <div class="overlay" role="presentation" onclick={handleBackdropClick}>
-    <div class="sheet" role="dialog" aria-modal="true" aria-label="New Terminal">
-      <div class="handle-bar">
-        <div class="handle"></div>
-      </div>
-
-      <h2 class="sheet-title">New Terminal</h2>
-
-      <div class="section">
-        <span class="section-label">Quick Launch</span>
-        <div class="preset-grid">
-          {#each presets as preset, i (preset.label)}
-            <Choicebox
-              mode="radio"
-              selected={selectedPreset === i}
-              onclick={(): void => {
-                selectPreset(i);
-              }}
-              classes="preset-choice"
-            >
-              {preset.label}
-            </Choicebox>
-          {/each}
-        </div>
+<Sheet
+  bind:open
+  side="bottom"
+  title="New Terminal"
+  onclose={onClose}
+  classes="launch-sheet"
+>
+  {#snippet content()}
+    <div class="section">
+      <span class="section-label">Quick Launch</span>
+      <div class="preset-grid">
+        {#each presets as preset, i (preset.label)}
+          <Choicebox
+            mode="radio"
+            selected={selectedPreset === i}
+            onclick={() => {
+              selectPreset(i);
+            }}
+            classes="preset-choice"
+          >
+            {preset.label}
+          </Choicebox>
+        {/each}
       </div>
+    </div>
 
-      <div class="section">
-        <span class="section-label">Working Directory</span>
-        <Select
-          items={projectPaths.length > 0
-            ? projectPaths.map((p) => ({ id: p, label: p }))
-            : [{ id: '', label: 'No recent projects' }]}
-          value={selectedCwd ? [selectedCwd] : projectPaths.length > 0 ? [projectPaths[0]] : ['']}
-          placeholder="Select a project"
-          onchange={(value: string[]): void => {
-            selectedCwd = value[0] || '';
-          }}
-          classes="launch-select"
+    <div class="section">
+      <span class="section-label">Working Directory</span>
+      <Select
+        items={projectPaths.length > 0
+          ? projectPaths.map((p) => ({ id: p, label: p }))
+          : [{ id: '', label: 'No recent projects' }]}
+        value={selectedCwd ? [selectedCwd] : projectPaths.length > 0 ? [projectPaths[0]] : ['']}
+        placeholder="Select a project"
+        onchange={(value) => {
+          selectedCwd = value[0] || '';
+        }}
+        classes="launch-select"
+      />
+      <div class="custom-cwd-group">
+        <Input
+          label="Or enter a custom path"
+          bind:value={customCwd}
+          dataType="text"
+          placeholder="/path/to/project"
+          classes="input-mono launch-input"
         />
-        <div class="custom-cwd-group">
-          <Input
-            label="Or enter a custom path"
-            bind:value={customCwd}
-            dataType="text"
-            placeholder="/path/to/project"
-            classes="input-mono launch-input"
-          />
-        </div>
       </div>
-
-      <Button
-        classes="btn-launch"
-        disabled={launching}
-        onclick={handleLaunch}
-        showLoader={launching}
-        text={launching ? 'Launching...' : 'Launch Terminal'}
-      />
-
-      {#if launchError}
-        <Banner text={launchError} classes="banner-error launch-error-banner" />
-      {/if}
     </div>
-  </div>
-{/if}
 
-<style>
-  .overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    z-index: 200;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-  }
+    <Button
+      classes="btn-launch"
+      disabled={launching}
+      onclick={handleLaunch}
+      showLoader={launching}
+      text={launching ? 'Launching...' : 'Launch Terminal'}
+    />
 
-  .sheet {
-    background: var(--ds-gray-100);
-    border-top-left-radius: var(--radius-xl);
-    border-top-right-radius: var(--radius-xl);
-    width: 100%;
-    max-height: 90vh;
-    overflow-y: auto;
-    padding: var(--space-4) var(--space-5)
-      calc(var(--space-8, 32px) + env(safe-area-inset-bottom, 0px));
-    animation: slideUp 0.25s ease;
-  }
+    {#if launchError}
+      <Banner text={launchError} classes="banner-error launch-error-banner" />
+    {/if}
+  {/snippet}
+</Sheet>
 
-  @keyframes slideUp {
-    from {
-      transform: translateY(100%);
-    }
-    to {
-      transform: translateY(0);
-    }
-  }
-
-  /* Desktop: centered modal */
-  @media (min-width: 768px) {
-    .overlay {
-      align-items: center;
-    }
-
-    .sheet {
-      max-width: 480px;
-      border-radius: var(--radius-xl);
-      animation: fadeScale 0.2s ease;
-    }
-
-    @keyframes fadeScale {
-      from {
-        opacity: 0;
-        transform: scale(0.96);
-      }
-      to {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
-  }
-
-  .handle-bar {
-    display: flex;
-    justify-content: center;
-    padding-bottom: var(--space-3);
-  }
-
-  .handle {
-    width: 36px;
-    height: 4px;
-    border-radius: var(--radius-full);
-    background: var(--ds-gray-500);
+<style>
+  :global(.launch-sheet) {
+    --sheet-overlay-z-index: 200;
+    --sheet-overlay-background: rgba(0, 0, 0, 0.6);
+    --sheet-background: var(--ds-gray-100);
+    --sheet-z-index: 201;
+    --sheet-max-height: 90vh;
+    --sheet-height: auto;
+    --sheet-border: none;
+    --sheet-box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
+    --sheet-header-padding: var(--space-4) var(--space-5);
+    --sheet-header-background: var(--ds-gray-100);
+    --sheet-header-border-bottom: none;
+    --sheet-title-font-size: var(--text-xl);
+    --sheet-title-font-weight: 600;
+    --sheet-title-color: var(--text-primary);
+    --sheet-close-button-color: var(--text-secondary);
+    --sheet-close-button-hover-background: var(--component-bg-hover);
+    --sheet-content-padding: 0 var(--space-5) calc(var(--space-8, 32px) + env(safe-area-inset-bottom, 0px));
   }
 
-  /* Hide handle bar on desktop */
+  /* Desktop: override bottom sheet to appear as centered modal */
   @media (min-width: 768px) {
-    .handle-bar {
-      display: none;
+    :global(.launch-sheet) {
+      --sheet-max-height: 80vh;
+      --sheet-width: 480px;
+      --sheet-max-width: 90vw;
     }
   }
 
-  .sheet-title {
-    font-size: var(--text-xl);
-    font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: var(--space-5);
-    letter-spacing: var(--tracking-tight);
-  }
-
   .section {
     margin-bottom: var(--space-4);
   }

package/src/lib/modules/client/terminal/QuickKeys.svelte

@@ -44,11 +44,11 @@
   }
 
   :global(.btn-quick-key) {
-    --button-color: #1e293b;
-    --button-text-color: #94a3b8;
+    --button-color: var(--ds-gray-200);
+    --button-text-color: var(--ds-gray-700);
     --button-border: 1px solid var(--ds-gray-400);
-    --button-hover-color: #334155;
-    --button-hover-text-color: #e2e8f0;
+    --button-hover-color: var(--ds-gray-300);
+    --button-hover-text-color: var(--text-primary);
     --button-hover-border: 1px solid var(--ds-gray-400);
     --button-height: 44px;
     --button-padding: 0 var(--space-3);

package/src/lib/modules/server/sessions/jsonl-reader.ts

@@ -103,16 +103,29 @@ export function getSessionConversation(
       }
     }
 
+    // Deduplicate messages by ID — JSONL files can contain duplicate entries
+    // (e.g., from compaction or streaming). Keep the last occurrence since it
+    // has the most complete content.
+    const seenIds = new Set<string>();
+    const deduped: ConversationMessage[] = [];
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (!seenIds.has(messages[i].id)) {
+        seenIds.add(messages[i].id);
+        deduped.push(messages[i]);
+      }
+    }
+    deduped.reverse();
+
     // If no explicit offset, return the LAST `limit` messages (most recent conversation)
-    if (offset === 0 && messages.length > limit) {
-      let startIdx = messages.length - limit;
+    if (offset === 0 && deduped.length > limit) {
+      let startIdx = deduped.length - limit;
       // Adjust to start at a 'user' message boundary so we don't clip mid-turn
-      while (startIdx > 0 && startIdx < messages.length && messages[startIdx].role !== 'user') {
+      while (startIdx > 0 && startIdx < deduped.length && deduped[startIdx].role !== 'user') {
         startIdx--;
       }
-      return messages.slice(startIdx);
+      return deduped.slice(startIdx);
     }
-    return messages.slice(offset, offset + limit);
+    return deduped.slice(offset, offset + limit);
   } catch (error) {
     console.error('[sessions] Failed to parse session JSONL:', error);
     return [];
@@ -277,37 +290,39 @@ function getProjectDir(): string {
 
 function listSessionsForProject(projectDir: string): SessionInfo[] {
   const indexPath = path.join(projectDir, 'sessions-index.json');
+  const hasIndex = fs.existsSync(indexPath);
 
-  if (!fs.existsSync(indexPath)) {
-    return [];
-  }
+  const indexedIds = new Set<string>();
+  const sessions: SessionInfo[] = [];
 
-  try {
-    const raw = fs.readFileSync(indexPath, 'utf-8');
-    const index = JSON.parse(raw) as {
-      entries: {
-        created?: string;
-        firstPrompt?: string;
-        gitBranch?: string;
-        isSidechain?: boolean;
-        messageCount?: number;
-        modified?: string;
-        projectPath?: string;
-        sessionId: string;
-        summary?: string;
-      }[];
-    };
-
-    const indexedIds = new Set<string>();
-    const sessions: SessionInfo[] = index.entries
-      .filter((e) => !e.isSidechain)
-      .filter((e) => {
-        const jsonlFile = path.join(projectDir, `${e.sessionId}.jsonl`);
-        return fs.existsSync(jsonlFile);
-      })
-      .map((entry) => {
+  // Phase 1: Read from sessions-index.json if it exists
+  if (hasIndex) {
+    try {
+      const raw = fs.readFileSync(indexPath, 'utf-8');
+      const index = JSON.parse(raw) as {
+        entries: {
+          created?: string;
+          firstPrompt?: string;
+          gitBranch?: string;
+          isSidechain?: boolean;
+          messageCount?: number;
+          modified?: string;
+          projectPath?: string;
+          sessionId: string;
+          summary?: string;
+        }[];
+      };
+
+      for (const entry of index.entries) {
+        if (entry.isSidechain) {
+          continue;
+        }
+        const jsonlFile = path.join(projectDir, `${entry.sessionId}.jsonl`);
+        if (!fs.existsSync(jsonlFile)) {
+          continue;
+        }
         indexedIds.add(entry.sessionId);
-        return {
+        sessions.push({
           created: entry.created || '',
           gitBranch: entry.gitBranch || '',
           id: entry.sessionId,
@@ -317,72 +332,68 @@ function listSessionsForProject(projectDir: string): SessionInfo[] {
           source: 'claude-code' as const,
           summary: entry.summary || '',
           title: cleanTitle(entry.firstPrompt || entry.summary || 'Untitled Session'),
-        };
-      });
+        });
+      }
+    } catch (error) {
+      console.error('[sessions] Failed to read sessions index:', error);
+    }
+  }
 
-    // Also scan for JSONL files not in the index (e.g., active sessions)
-    try {
-      const files = fs.readdirSync(projectDir);
-      for (const file of files) {
-        if (!file.endsWith('.jsonl')) {
-          continue;
-        }
-        const sessionId = file.replace('.jsonl', '');
-        if (indexedIds.has(sessionId)) {
-          continue;
-        }
-        // Read first user message as title
-        const filePath = path.join(projectDir, file);
-        const stat = fs.statSync(filePath);
-        let firstPrompt = 'Active Session';
-        let messageCount = 0;
-        try {
-          const content = fs.readFileSync(filePath, 'utf-8');
-          // Count user + assistant messages by searching each line for the type field.
-          // The type field may appear anywhere on the line (after parentUuid, isSidechain, etc.)
-          // so a prefix-only check is not reliable with the current JSONL format.
-          let countPos = 0;
-          while (countPos < content.length) {
-            const nl = content.indexOf('\n', countPos);
-            const lineEnd = nl === -1 ? content.length : nl;
-            const line = content.substring(countPos, lineEnd);
-            if (line.includes('"type":"user"') || line.includes('"type":"assistant"')) {
-              messageCount++;
-            }
-            if (nl === -1) {
-              break;
-            }
-            countPos = nl + 1;
+  // Phase 2: Scan for JSONL files not in the index (or all files when no index exists)
+  try {
+    const files = fs.readdirSync(projectDir);
+    for (const file of files) {
+      if (!file.endsWith('.jsonl')) {
+        continue;
+      }
+      const sessionId = file.replace('.jsonl', '');
+      if (indexedIds.has(sessionId)) {
+        continue;
+      }
+      const filePath = path.join(projectDir, file);
+      const stat = fs.statSync(filePath);
+      let firstPrompt = 'Active Session';
+      let messageCount = 0;
+      try {
+        const content = fs.readFileSync(filePath, 'utf-8');
+        let countPos = 0;
+        while (countPos < content.length) {
+          const nl = content.indexOf('\n', countPos);
+          const lineEnd = nl === -1 ? content.length : nl;
+          const line = content.substring(countPos, lineEnd);
+          if (line.includes('"type":"user"') || line.includes('"type":"assistant"')) {
+            messageCount++;
           }
-          const prompt = findFirstUserPrompt(content);
-          if (prompt) {
-            firstPrompt = prompt;
+          if (nl === -1) {
+            break;
           }
-        } catch {
-          // ignore read errors
+          countPos = nl + 1;
         }
-
-        sessions.push({
-          created: stat.birthtime.toISOString(),
-          gitBranch: '',
-          id: sessionId,
-          messageCount,
-          modified: stat.mtime.toISOString(),
-          projectPath: '',
-          source: 'claude-code' as const,
-          summary: '',
-          title: cleanTitle(firstPrompt),
-        });
+        const prompt = findFirstUserPrompt(content);
+        if (prompt) {
+          firstPrompt = prompt;
+        }
+      } catch {
+        // ignore read errors
       }
-    } catch {
-      // ignore scan errors
-    }
 
-    return sessions.sort((a, b) => new Date(b.modified).getTime() - new Date(a.modified).getTime());
-  } catch (error) {
-    console.error('[sessions] Failed to read sessions index:', error);
-    return [];
+      sessions.push({
+        created: stat.birthtime.toISOString(),
+        gitBranch: '',
+        id: sessionId,
+        messageCount,
+        modified: stat.mtime.toISOString(),
+        projectPath: '',
+        source: 'claude-code' as const,
+        summary: '',
+        title: cleanTitle(firstPrompt),
+      });
+    }
+  } catch {
+    // ignore scan errors
   }
+
+  return sessions.sort((a, b) => new Date(b.modified).getTime() - new Date(a.modified).getTime());
 }
 
 function readCwdFromProjectDir(projectDir: string, sessions: SessionInfo[]): string {

package/src/lib/theme.css

@@ -421,13 +421,13 @@
 }
 
 .pill-live {
-  --pill-background: rgba(34, 197, 94, 0.15);
-  --pill-color: #22c55e;
-  --pill-border: 1px solid rgba(34, 197, 94, 0.3);
+  --pill-background: var(--ds-green-alpha-200);
+  --pill-color: var(--ds-green-700);
+  --pill-border: 1px solid var(--ds-green-alpha-400);
   --pill-font-size: 0.7rem;
   --pill-padding: 2px 10px;
-  --pill-hover-background: rgba(34, 197, 94, 0.15);
-  --pill-hover-color: #22c55e;
+  --pill-hover-background: var(--ds-green-alpha-200);
+  --pill-hover-color: var(--ds-green-700);
   --pill-cursor: default;
   font-weight: 700;
   letter-spacing: 0.05em;
@@ -506,6 +506,126 @@
   --pill-cursor: inherit;
 }
 
+/* ===== Icon Sizes ===== */
+.icon-14 {
+  --icon-width: 14px;
+  --icon-height: 14px;
+  --icon-padding: 0;
+  --icon-container-paddding: 0;
+}
+
+.icon-16 {
+  --icon-width: 16px;
+  --icon-height: 16px;
+  --icon-padding: 0;
+  --icon-container-paddding: 0;
+}
+
+.icon-18 {
+  --icon-width: 18px;
+  --icon-height: 18px;
+  --icon-padding: 0;
+  --icon-container-paddding: 0;
+}
+
+.icon-24 {
+  --icon-width: 24px;
+  --icon-height: 24px;
+  --icon-padding: 0;
+  --icon-container-paddding: 0;
+}
+
+.icon-26 {
+  --icon-width: 26px;
+  --icon-height: 26px;
+  --icon-padding: 0;
+  --icon-container-paddding: 0;
+}
+
+/* ===== RelativeTime ===== */
+.terminal-time {
+  --relative-time-font-size: var(--text-xs);
+  --relative-time-color: var(--text-tertiary);
+  --relative-time-font-weight: 400;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ===== Status Badge Pill Variants ===== */
+
+.pill-status-online {
+  --pill-background: var(--ds-green-100);
+  --pill-color: var(--ds-green-900);
+  --pill-font-size: var(--text-xs);
+  --pill-font-weight: 500;
+  --pill-padding: 0 var(--space-3);
+  --pill-border-radius: var(--radius-full);
+  --pill-hover-background: var(--ds-green-100);
+  --pill-hover-color: var(--ds-green-900);
+  --pill-cursor: default;
+  height: 26px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.pill-status-offline {
+  --pill-background: var(--ds-red-100);
+  --pill-color: var(--ds-red-900);
+  --pill-font-size: var(--text-xs);
+  --pill-font-weight: 500;
+  --pill-padding: 0 var(--space-3);
+  --pill-border-radius: var(--radius-full);
+  --pill-hover-background: var(--ds-red-100);
+  --pill-hover-color: var(--ds-red-900);
+  --pill-cursor: default;
+  height: 26px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.pill-status-degraded {
+  --pill-background: var(--ds-amber-100);
+  --pill-color: var(--ds-amber-900);
+  --pill-font-size: var(--text-xs);
+  --pill-font-weight: 500;
+  --pill-padding: 0 var(--space-3);
+  --pill-border-radius: var(--radius-full);
+  --pill-hover-background: var(--ds-amber-100);
+  --pill-hover-color: var(--ds-amber-900);
+  --pill-cursor: default;
+  height: 26px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.pill-status-unknown {
+  --pill-background: var(--ds-gray-300);
+  --pill-color: var(--text-secondary);
+  --pill-font-size: var(--text-xs);
+  --pill-font-weight: 500;
+  --pill-padding: 0 var(--space-3);
+  --pill-border-radius: var(--radius-full);
+  --pill-hover-background: var(--ds-gray-300);
+  --pill-hover-color: var(--text-secondary);
+  --pill-cursor: default;
+  height: 26px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.pill-status-online::before,
+.pill-status-offline::before,
+.pill-status-degraded::before,
+.pill-status-unknown::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+
 /* ===== Shimmer Variant Classes ===== */
 
 .shimmer-header {

package/src/lib/types/terminal-client.ts

@@ -51,7 +51,7 @@ export interface LaunchSheetProps {
   apiKey: string;
   onClose: () => void;
   onLaunch: (response: CreateTerminalResponse) => void;
-  open: boolean;
+  open?: boolean;
 }
 
 export interface LayoutData {