@juspay/shooter 1.0.0 → 1.2.0

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

@@ -5,11 +5,9 @@
     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 {
-    getToolDescription,
-    renderMarkdown,
-  } from '$lib/modules/client/common';
   import { tick } from 'svelte';
   import { SvelteSet } from 'svelte/reactivity';
 
@@ -17,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
@@ -48,21 +129,35 @@
   });
 
   async function scrollToBottom(): Promise<void> {
-    if (!shouldAutoScroll || !chatContainerEl) { return; }
+    if (!shouldAutoScroll || !chatContainerEl) {
+      return;
+    }
     await tick();
-    chatContainerEl.scrollTop = chatContainerEl.scrollHeight;
+    if (newestFirst) {
+      chatContainerEl.scrollTop = 0;
+    } else {
+      chatContainerEl.scrollTop = chatContainerEl.scrollHeight;
+    }
   }
 
   function handleScroll(): void {
-    if (!chatContainerEl) { return; }
+    if (!chatContainerEl) {
+      return;
+    }
     const { clientHeight, scrollHeight, scrollTop } = chatContainerEl;
-    shouldAutoScroll = scrollHeight - scrollTop - clientHeight < 100;
+    if (newestFirst) {
+      shouldAutoScroll = scrollTop < 100;
+    } else {
+      shouldAutoScroll = scrollHeight - scrollTop - clientHeight < 100;
+    }
   }
 
   // --- Input handling ---
   function handleSend(): void {
     const text = inputText.trim();
-    if (!text) { return; }
+    if (!text) {
+      return;
+    }
     inputText = '';
     onSendInput?.(text);
   }
@@ -83,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' });
   }
@@ -109,9 +212,7 @@
         <span class="chatview-title">Session</span>
       </div>
       <div class="chatview-header-right">
-        <span
-          class="connection-status {connectionState}"
-        >
+        <span class="connection-status {connectionState}">
           <span class="connection-status-dot"></span>
           {connectionState === 'connected'
             ? 'Connected'
@@ -120,23 +221,38 @@
               : 'Disconnected'}
         </span>
         {#if !sessionEnded && onCancel}
-          <Button classes="btn-danger btn-sm" onclick={() => { onCancel(); }} text="Cancel" />
+          <Button
+            classes="btn-danger btn-sm"
+            onclick={() => {
+              onCancel();
+            }}
+            text="Cancel"
+          />
         {/if}
       </div>
     </div>
   {/if}
 
   <!-- Chat Container (scrollable) -->
-  <div
-    class="chat-container chatview-scroll"
-    bind:this={chatContainerEl}
-    onscroll={handleScroll}
-  >
+  <div class="chat-container chatview-scroll" bind:this={chatContainerEl} onscroll={handleScroll}>
     {#if messages.length === 0}
       <div class="chatview-empty">
         <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">
@@ -144,6 +260,7 @@
               {#each message.parts as part, partIdx (partIdx)}
                 {#if part.type === 'text'}
                   <div class="chat-bubble chat-bubble-user">
+                    <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized markdown -->
                     {@html renderMarkdown(part.content)}
                   </div>
                 {/if}
@@ -156,43 +273,102 @@
           <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">
-                    {@html renderMarkdown(part.content)}
+                    <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized markdown -->
+                    {@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); }}
                       onkeydown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') { toggleTool(toolId); }
+                        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={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); }}
                       onkeydown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') { toggleTool(thinkId); }
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          toggleTool(thinkId);
+                        }
                       }}
                       role="button"
                       tabindex="0"
@@ -201,7 +377,8 @@
                     </div>
                     <Accordion expand={isThinkExpanded}>
                       {#if isThinkExpanded}
-                        <div class="chat-thinking-body">{@html renderMarkdown(part.content)}</div>
+                        <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized markdown -->
+                        <div class="chat-thinking-body">{@html renderMarkdown(gpart.content)}</div>
                       {/if}
                     </Accordion>
                   </div>
@@ -211,49 +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 === ' ') { 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">
-                  {@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}
 
@@ -273,14 +459,15 @@
       <Input
         bind:value={inputText}
         dataType="text"
-        placeholder={sessionEnded ? 'Session ended' : 'Send a message...'}
-        disable={sessionEnded || connectionState !== 'connected'}
+        useTextArea={true}
+        placeholder={sessionEnded ? 'Session ended' : 'Send a message... (Shift+Enter for new line)'}
+        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"
       />
@@ -375,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/CommandPalette.svelte

@@ -9,10 +9,11 @@
   interface Props {
     commands: Command[];
     onClose: () => void;
-    open: boolean;
+    open?: boolean;
   }
 
-  let { commands, onClose, open = $bindable() }: Props = $props();
+  // eslint-disable-next-line prefer-const -- open is mutated via bind:open from parent
+  let { commands, onClose, open = $bindable(false) }: Props = $props();
 
   const items = $derived(
     commands.map((cmd, i) => ({

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

@@ -17,7 +17,13 @@
   );
 </script>
 
-<div class="connection-status" class:reconnecting={status === 'reconnecting'} class:disconnected={status === 'disconnected'} class:connected={status === 'connected'}>
+<div
+  class="connection-status"
+  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>
   {#if status === 'disconnected' && onretry}