@juspay/shooter 1.1.0 → 1.2.0

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

@@ -5,6 +5,7 @@
     ToolUsePart,
   } from '$lib/modules/server/sessions/types';
 
+  import { browser } from '$app/environment';
   import { getToolDescription, renderMarkdown } from '$lib/modules/client/common';
   import { Accordion, Avatar, Button, Input, Pill } from '@juspay/svelte-ui-components';
   import { tick } from 'svelte';
@@ -14,27 +15,110 @@
   const {
     connectionState = 'idle',
     messages,
+    newestFirst = false,
     onCancel,
     onSendInput,
+    sendDisabled,
     sessionEnded = false,
     showHeader = false,
     showInput = true,
   }: {
     connectionState?: 'connected' | 'connecting' | 'disconnected' | 'idle' | 'reconnecting';
     messages: ConversationMessage[];
+    newestFirst?: boolean;
     onCancel?: () => void;
     onSendInput?: (text: string) => void;
+    sendDisabled?: boolean;
     sessionEnded?: boolean;
     showHeader?: boolean;
     showInput?: boolean;
   } = $props();
 
+  // When sendDisabled is explicitly provided, it overrides the connectionState check.
+  // Otherwise fall back to the existing behaviour (disabled when not connected).
+  const isInputDisabled = $derived(
+    sessionEnded ||
+    (sendDisabled !== undefined ? sendDisabled : connectionState !== 'connected')
+  );
+
   // --- Local state ---
   let inputText = $state('');
   let chatContainerEl = $state<HTMLElement | null>(null);
   let shouldAutoScroll = $state(true);
 
   const expandedTools = new SvelteSet<string>();
+  const expandedGroups = new SvelteSet<string>();
+
+  // --- Show Details toggle (persisted in localStorage) ---
+  const SHOW_DETAILS_KEY = 'shooter:chatview:showDetails';
+  let showDetails = $state(
+    browser ? localStorage.getItem(SHOW_DETAILS_KEY) === 'true' : false,
+  );
+
+  function toggleShowDetails(): void {
+    showDetails = !showDetails;
+    if (browser) {
+      localStorage.setItem(SHOW_DETAILS_KEY, String(showDetails));
+    }
+  }
+
+  // --- Tool grouping ---
+  interface ToolGroup {
+    groupId: string;
+    summary: string;
+    tools: ToolUsePart[];
+    type: 'tool_group';
+  }
+
+  type GroupedPart = MessagePart | ToolGroup;
+
+  function groupMessageParts(parts: MessagePart[], messageId: string): GroupedPart[] {
+    const result: GroupedPart[] = [];
+    let currentToolGroup: ToolUsePart[] = [];
+    let groupIndex = 0;
+
+    function flushToolGroup(): void {
+      if (currentToolGroup.length === 0) {return;}
+
+      if (currentToolGroup.length === 1) {
+        // Single tool -- render as normal tool card, no group wrapper
+        result.push(currentToolGroup[0]);
+      } else {
+        const toolNames = currentToolGroup.map((t) => t.toolName);
+        // Deduplicate tool names while preserving order
+        const uniqueNames = [...new Set(toolNames)];
+        const summary = `Used ${currentToolGroup.length} tools: ${uniqueNames.join(', ')}`;
+        result.push({
+          groupId: `toolgroup-${messageId}-${groupIndex}`,
+          summary,
+          tools: currentToolGroup,
+          type: 'tool_group',
+        });
+        groupIndex++;
+      }
+      currentToolGroup = [];
+    }
+
+    for (const part of parts) {
+      if (part.type === 'tool_use') {
+        currentToolGroup.push(part);
+      } else {
+        flushToolGroup();
+        result.push(part);
+      }
+    }
+    flushToolGroup();
+
+    return result;
+  }
+
+  function isToolGroup(part: GroupedPart): part is ToolGroup {
+    return (part as ToolGroup).type === 'tool_group';
+  }
+
+  function hasOnlyToolResults(message: ConversationMessage): boolean {
+    return message.parts.every((p) => p.type === 'tool_result');
+  }
 
   // --- Auto-scroll ---
   // Re-scroll whenever the messages array identity changes
@@ -49,7 +133,11 @@
       return;
     }
     await tick();
-    chatContainerEl.scrollTop = chatContainerEl.scrollHeight;
+    if (newestFirst) {
+      chatContainerEl.scrollTop = 0;
+    } else {
+      chatContainerEl.scrollTop = chatContainerEl.scrollHeight;
+    }
   }
 
   function handleScroll(): void {
@@ -57,7 +145,11 @@
       return;
     }
     const { clientHeight, scrollHeight, scrollTop } = chatContainerEl;
-    shouldAutoScroll = scrollHeight - scrollTop - clientHeight < 100;
+    if (newestFirst) {
+      shouldAutoScroll = scrollTop < 100;
+    } else {
+      shouldAutoScroll = scrollHeight - scrollTop - clientHeight < 100;
+    }
   }
 
   // --- Input handling ---
@@ -86,6 +178,14 @@
     }
   }
 
+  function toggleGroup(id: string): void {
+    if (expandedGroups.has(id)) {
+      expandedGroups.delete(id);
+    } else {
+      expandedGroups.add(id);
+    }
+  }
+
   function formatTime(ts: string): string {
     return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
   }
@@ -140,6 +240,19 @@
         <p class="chatview-empty-text">Waiting for session messages...</p>
       </div>
     {:else}
+      <!-- Show details toggle -->
+      <div class="chatview-details-toggle">
+        <button
+          class="chatview-details-btn"
+          class:active={showDetails}
+          onclick={toggleShowDetails}
+          type="button"
+        >
+          <span class="chatview-details-icon">{showDetails ? '&#9660;' : '&#9654;'}</span>
+          {showDetails ? 'Hide details' : 'Show details'}
+        </button>
+      </div>
+
       {#each messages as message (message.id)}
         {#if message.role === 'user'}
           <div class="chat-message chat-message-user">
@@ -160,21 +273,71 @@
           <div class="chat-message chat-message-assistant">
             <Avatar alt="Claude" name="Claude" size="small" classes="avatar-assistant" />
             <div>
-              {#each message.parts as part, partIdx (partIdx)}
-                {#if part.type === 'text'}
+              {#each groupMessageParts(message.parts, message.id) as gpart, partIdx (partIdx)}
+                {#if isToolGroup(gpart)}
+                  <!-- Collapsed tool group summary -->
+                  {@const groupExpanded = showDetails || expandedGroups.has(gpart.groupId)}
+                  <div class="chat-tool-group">
+                    <div
+                      class="chat-tool-group-header"
+                      onclick={() => { toggleGroup(gpart.groupId); }}
+                      onkeydown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          toggleGroup(gpart.groupId);
+                        }
+                      }}
+                      role="button"
+                      tabindex="0"
+                    >
+                      <span class="chat-tool-group-chevron" class:expanded={groupExpanded}>&#9654;</span>
+                      <span class="chat-tool-group-summary">{gpart.summary}</span>
+                    </div>
+                    {#if groupExpanded}
+                      <div class="chat-tool-group-body">
+                        {#each gpart.tools as tool (tool.id)}
+                          {@const toolId = tool.id}
+                          {@const isExpanded = showDetails || expandedTools.has(toolId)}
+                          <div class="chat-tool-card">
+                            <div
+                              class="chat-tool-header"
+                              onclick={() => { toggleTool(toolId); }}
+                              onkeydown={(e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                  e.preventDefault();
+                                  toggleTool(toolId);
+                                }
+                              }}
+                              role="button"
+                              tabindex="0"
+                            >
+                              <span class="chat-tool-chevron" class:expanded={isExpanded}>&#9654;</span>
+                              <Pill text={tool.toolName} classes="pill-tool-name" />
+                              <span class="chat-tool-description">{getToolDescriptionFromPart(tool)}</span>
+                            </div>
+                            <Accordion expand={isExpanded}>
+                              {#if isExpanded}
+                                <div class="chat-tool-body">{formatInput(tool.input)}</div>
+                              {/if}
+                            </Accordion>
+                          </div>
+                        {/each}
+                      </div>
+                    {/if}
+                  </div>
+                {:else if gpart.type === 'text'}
                   <div class="chat-bubble chat-bubble-assistant">
                     <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized markdown -->
-                    {@html renderMarkdown(part.content)}
+                    {@html renderMarkdown(gpart.content)}
                   </div>
-                {:else if isToolUsePart(part)}
-                  {@const toolId = part.id}
-                  {@const isExpanded = expandedTools.has(toolId)}
+                {:else if isToolUsePart(gpart)}
+                  <!-- Single tool (not grouped) -->
+                  {@const toolId = gpart.id}
+                  {@const isExpanded = showDetails || expandedTools.has(toolId)}
                   <div class="chat-tool-card">
                     <div
                       class="chat-tool-header"
-                      onclick={() => {
-                        toggleTool(toolId);
-                      }}
+                      onclick={() => { toggleTool(toolId); }}
                       onkeydown={(e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
                           e.preventDefault();
@@ -185,24 +348,22 @@
                       tabindex="0"
                     >
                       <span class="chat-tool-chevron" class:expanded={isExpanded}>&#9654;</span>
-                      <Pill text={part.toolName} classes="pill-tool-name" />
-                      <span class="chat-tool-description">{getToolDescriptionFromPart(part)}</span>
+                      <Pill text={gpart.toolName} classes="pill-tool-name" />
+                      <span class="chat-tool-description">{getToolDescriptionFromPart(gpart)}</span>
                     </div>
                     <Accordion expand={isExpanded}>
                       {#if isExpanded}
-                        <div class="chat-tool-body">{formatInput(part.input)}</div>
+                        <div class="chat-tool-body">{formatInput(gpart.input)}</div>
                       {/if}
                     </Accordion>
                   </div>
-                {:else if part.type === 'thinking'}
+                {:else if gpart.type === 'thinking'}
                   {@const thinkId = `thinking-${message.id}`}
-                  {@const isThinkExpanded = expandedTools.has(thinkId)}
+                  {@const isThinkExpanded = showDetails || expandedTools.has(thinkId)}
                   <div class="chat-thinking">
                     <div
                       class="chat-thinking-header"
-                      onclick={() => {
-                        toggleTool(thinkId);
-                      }}
+                      onclick={() => { toggleTool(thinkId); }}
                       onkeydown={(e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
                           e.preventDefault();
@@ -217,7 +378,7 @@
                     <Accordion expand={isThinkExpanded}>
                       {#if isThinkExpanded}
                         <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized markdown -->
-                        <div class="chat-thinking-body">{@html renderMarkdown(part.content)}</div>
+                        <div class="chat-thinking-body">{@html renderMarkdown(gpart.content)}</div>
                       {/if}
                     </Accordion>
                   </div>
@@ -227,55 +388,58 @@
             </div>
           </div>
         {:else if message.role === 'system'}
-          {#each message.parts as part, partIdx (partIdx)}
-            {#if part.type === 'tool_result'}
-              {@const resultId = `result-${part.toolUseId}`}
-              {@const isResultExpanded = expandedTools.has(resultId)}
-              <div class="chat-message chat-message-system">
-                <div class="chat-tool-card">
-                  <div
-                    class="chat-tool-header"
-                    onclick={() => {
-                      toggleTool(resultId);
-                    }}
-                    onkeydown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        toggleTool(resultId);
-                      }
-                    }}
-                    role="button"
-                    tabindex="0"
-                  >
-                    <span class="chat-tool-chevron" class:expanded={isResultExpanded}>&#9654;</span>
-                    <Pill
-                      text={part.isError ? '\u274C Tool Error' : '\u2705 Tool Result'}
-                      classes={part.isError ? 'pill-tool-error' : 'pill-tool-success'}
-                    />
-                  </div>
-                  <Accordion expand={isResultExpanded}>
-                    {#if isResultExpanded}
+          <!-- Hide system messages with only tool_result when details are off -->
+          {#if showDetails || !hasOnlyToolResults(message)}
+            {#each message.parts as part, partIdx (partIdx)}
+              {#if part.type === 'tool_result'}
+                {#if showDetails}
+                  {@const resultId = `result-${part.toolUseId}`}
+                  {@const isResultExpanded = expandedTools.has(resultId)}
+                  <div class="chat-message chat-message-system">
+                    <div class="chat-tool-card">
                       <div
-                        class="chat-tool-result"
-                        class:chat-tool-result-success={!part.isError}
-                        class:chat-tool-result-error={part.isError}
+                        class="chat-tool-header"
+                        onclick={() => { toggleTool(resultId); }}
+                        onkeydown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            toggleTool(resultId);
+                          }
+                        }}
+                        role="button"
+                        tabindex="0"
                       >
-                        {part.output}
+                        <span class="chat-tool-chevron" class:expanded={isResultExpanded}>&#9654;</span>
+                        <Pill
+                          text={part.isError ? '\u274C Tool Error' : '\u2705 Tool Result'}
+                          classes={part.isError ? 'pill-tool-error' : 'pill-tool-success'}
+                        />
                       </div>
-                    {/if}
-                  </Accordion>
-                </div>
-              </div>
-            {:else if part.type === 'text'}
-              <!-- System text messages (e.g. error messages displayed inline) -->
-              <div class="chat-message chat-message-system">
-                <div class="chat-bubble chat-bubble-system">
-                  <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized markdown -->
-                  {@html renderMarkdown(part.content)}
+                      <Accordion expand={isResultExpanded}>
+                        {#if isResultExpanded}
+                          <div
+                            class="chat-tool-result"
+                            class:chat-tool-result-success={!part.isError}
+                            class:chat-tool-result-error={part.isError}
+                          >
+                            {part.output}
+                          </div>
+                        {/if}
+                      </Accordion>
+                    </div>
+                  </div>
+                {/if}
+              {:else if part.type === 'text'}
+                <!-- System text messages (e.g. error messages displayed inline) -->
+                <div class="chat-message chat-message-system">
+                  <div class="chat-bubble chat-bubble-system">
+                    <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized markdown -->
+                    {@html renderMarkdown(part.content)}
+                  </div>
                 </div>
-              </div>
-            {/if}
-          {/each}
+              {/if}
+            {/each}
+          {/if}
         {/if}
       {/each}
 
@@ -297,13 +461,13 @@
         dataType="text"
         useTextArea={true}
         placeholder={sessionEnded ? 'Session ended' : 'Send a message... (Shift+Enter for new line)'}
-        disable={sessionEnded || connectionState !== 'connected'}
+        disable={isInputDisabled}
         onKeyDown={handleKeydown}
         classes="chat-input-field"
       />
       <Button
         classes="btn-primary btn-sm"
-        disabled={sessionEnded || connectionState !== 'connected' || !inputText.trim()}
+        disabled={isInputDisabled || !inputText.trim()}
         onclick={handleSend}
         text="Send"
       />
@@ -398,6 +562,99 @@
     color: var(--text-tertiary, #7d7d7d);
   }
 
+  /* Show details toggle */
+  .chatview-details-toggle {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 0 var(--space-2, 0.5rem) 0;
+    position: sticky;
+    top: 0;
+    z-index: 5;
+  }
+
+  .chatview-details-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1, 0.25rem);
+    padding: 4px 10px;
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: var(--radius-sm, 4px);
+    background: var(--bg-secondary, #141414);
+    color: var(--text-tertiary, #7d7d7d);
+    font-size: 0.7rem;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      color var(--transition-fast, 150ms),
+      border-color var(--transition-fast, 150ms);
+  }
+
+  .chatview-details-btn:hover {
+    color: var(--text-secondary, #a3a3a3);
+    border-color: var(--text-tertiary, #7d7d7d);
+  }
+
+  .chatview-details-btn.active {
+    color: var(--text-secondary, #a3a3a3);
+    border-color: var(--text-tertiary, #7d7d7d);
+  }
+
+  .chatview-details-icon {
+    font-size: 0.55rem;
+    line-height: 1;
+  }
+
+  /* Tool group (collapsed N tools) */
+  .chat-tool-group {
+    background: var(--bg-secondary, #141414);
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: var(--radius-md, 8px);
+    overflow: hidden;
+    margin: var(--space-2, 0.5rem) 0;
+    max-width: 90%;
+    align-self: flex-start;
+  }
+
+  .chat-tool-group-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 0.5rem);
+    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+    cursor: pointer;
+    user-select: none;
+    transition: background var(--transition-fast, 150ms);
+  }
+
+  .chat-tool-group-header:hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .chat-tool-group-chevron {
+    font-size: 0.7rem;
+    color: var(--text-tertiary, #737373);
+    transition: transform 0.2s ease;
+  }
+
+  .chat-tool-group-chevron.expanded {
+    transform: rotate(90deg);
+  }
+
+  .chat-tool-group-summary {
+    font-size: 0.8rem;
+    color: var(--text-tertiary, #737373);
+    font-weight: 500;
+  }
+
+  .chat-tool-group-body {
+    border-top: 1px solid var(--border, #2a2a2a);
+    padding: var(--space-2, 0.5rem);
+  }
+
+  .chat-tool-group-body .chat-tool-card {
+    margin: var(--space-1, 0.25rem) 0;
+    max-width: 100%;
+  }
+
   /* Mobile responsive */
   @media (max-width: 768px) {
     .chatview-header {

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

@@ -22,6 +22,7 @@
   class:reconnecting={status === 'reconnecting'}
   class:disconnected={status === 'disconnected'}
   class:connected={status === 'connected'}
+  aria-label="Connection: {status}"
 >
   <span class="status-dot {status}"></span>
   <span class="status-label">{label}</span>

package/src/lib/modules/client/terminal/xterm-wrapper.ts

@@ -230,8 +230,11 @@ export async function createTerminal(options: TerminalOptions): Promise<Terminal
     }
   });
 
-  // Handle resize
+  // Handle resize — skip when container is hidden (display:none → size 0)
   const resizeObserver = new ResizeObserver(() => {
+    if (!options.container.offsetWidth || !options.container.offsetHeight) {
+      return;
+    }
     fitAddon.fit();
     if (ws?.readyState === WebSocket.OPEN) {
       ws.send(JSON.stringify({ cols: term.cols, rows: term.rows, type: 'resize' }));

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

@@ -44,6 +44,15 @@ export function getSessionConversation(
       }
     }
 
+    // If no explicit offset, return the LAST `limit` messages (most recent conversation)
+    if (offset === 0 && messages.length > limit) {
+      let startIdx = messages.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') {
+        startIdx--;
+      }
+      return messages.slice(startIdx);
+    }
     return messages.slice(offset, offset + limit);
   } catch (error) {
     console.error('[sessions] Failed to parse session JSONL:', error);
@@ -218,22 +227,20 @@ function listSessionsForProject(projectDir: string): SessionInfo[] {
         let messageCount = 0;
         try {
           const content = fs.readFileSync(filePath, 'utf-8');
-          // Count user + assistant messages for the message count
-          const lines = content.split('\n');
-          for (const line of lines) {
-            if (!line.trim()) {
-              continue;
-            }
-            try {
-              const entry = JSON.parse(line);
-              if (entry.type === 'user' || entry.type === 'assistant') {
-                messageCount++;
-              }
-            } catch {
-              // skip malformed lines
-            }
+          // 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;
           }
           // Find the first real user message (skip system caveats, commands, tool results)
+          const lines = content.split('\n');
           for (const line of lines) {
             if (!line.trim()) {
               continue;
@@ -320,23 +327,31 @@ function listSessionsForProject(projectDir: string): SessionInfo[] {
 function readCwdFromProjectDir(projectDir: string, sessions: SessionInfo[]): string {
   for (const session of sessions) {
     try {
-      const jsonlPath = path.join(projectDir, `${session.id}.jsonl`);
-      if (!fs.existsSync(jsonlPath)) {
+      const filePath = path.join(projectDir, `${session.id}.jsonl`);
+      if (!fs.existsSync(filePath)) {
         continue;
       }
-      const content = fs.readFileSync(jsonlPath, 'utf-8');
-      for (const line of content.split('\n')) {
-        if (!line.trim()) {
-          continue;
-        }
-        try {
-          const entry = JSON.parse(line) as Record<string, unknown>;
-          if (typeof entry.cwd === 'string' && entry.cwd) {
-            return entry.cwd;
-          }
-        } catch {
-          // skip malformed lines
+      // Only read the first 4KB — cwd appears on line 1
+      const fd = fs.openSync(filePath, 'r');
+      let firstChunk: string;
+      try {
+        const buf = Buffer.alloc(4096);
+        const bytesRead = fs.readSync(fd, buf, 0, 4096, 0);
+        firstChunk = buf.toString('utf-8', 0, bytesRead);
+      } finally {
+        fs.closeSync(fd);
+      }
+      const firstLine = firstChunk.split('\n')[0];
+      if (!firstLine.trim()) {
+        continue;
+      }
+      try {
+        const entry = JSON.parse(firstLine) as Record<string, unknown>;
+        if (typeof entry.cwd === 'string' && entry.cwd) {
+          return entry.cwd;
         }
+      } catch {
+        // skip malformed first line
       }
     } catch {
       // skip unreadable files

package/src/lib/modules/server/sessions/opencode-db-path.ts

@@ -0,0 +1,26 @@
+import * as path from 'path';
+
+/**
+ * Resolve the path to the OpenCode SQLite database.
+ *
+ * Checks in this order:
+ * 1. XDG_DATA_HOME/opencode/opencode.db (honours XDG override)
+ * 2. ~/Library/Application Support/opencode/opencode.db (legacy macOS path)
+ * 3. ~/.local/share/opencode/opencode.db (XDG default)
+ */
+export function resolveOpenCodeDbPath(): string {
+  const home = process.env.HOME || '';
+
+  // 1. If XDG_DATA_HOME is explicitly set, use it
+  if (process.env.XDG_DATA_HOME) {
+    return path.join(process.env.XDG_DATA_HOME, 'opencode', 'opencode.db');
+  }
+
+  // 2. Legacy macOS path (~/Library/Application Support/opencode/)
+  if (process.platform === 'darwin') {
+    return path.join(home, 'Library', 'Application Support', 'opencode', 'opencode.db');
+  }
+
+  // 3. XDG default (~/.local/share/opencode/)
+  return path.join(home, '.local', 'share', 'opencode', 'opencode.db');
+}