@juspay/shooter 1.0.0

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

@@ -0,0 +1,294 @@
+<script lang="ts">
+  import { Banner, Button, Choicebox, Input, Select, Sheet } from '@juspay/svelte-ui-components';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    apiKey: string;
+    onClose: () => void;
+    onLaunch: (response: TerminalResponse) => void;
+    open: boolean;
+  }
+
+  interface TerminalResponse {
+    command: string;
+    createdAt: string;
+    cwd: string;
+    id: string;
+    pid: number;
+    sessionWs: string;
+    ws: string;
+  }
+
+  interface Preset {
+    args: string[];
+    command: string;
+    label: string;
+  }
+
+  let { apiKey, onClose, onLaunch, open = $bindable() }: Props = $props();
+
+  const presets: Preset[] = [
+    { args: [], command: 'claude', label: 'Claude Code' },
+    { args: [], command: 'opencode', label: 'OpenCode' },
+    { args: [], command: 'zsh', label: 'Shell / zsh' },
+    { args: [], command: 'bash', label: 'Bash' },
+  ];
+
+  let selectedPreset = $state<number>(0);
+  let customCommand = $state('');
+  let projectPaths = $state<string[]>([]);
+  let selectedCwd = $state('');
+  let customCwd = $state('');
+  let launching = $state(false);
+  let launchError = $state('');
+
+  onMount(() => {
+    void fetchProjectPaths();
+  });
+
+  async function fetchProjectPaths(): Promise<void> {
+    try {
+      const response = await fetch('/api/sessions?limit=50&offset=0', {
+        headers: { Authorization: `Bearer ${apiKey}` },
+      });
+      if (!response.ok) {return;}
+      const data: { projects: { fullPath: string }[] } = await response.json();
+      const paths = data.projects
+        .map((p) => p.fullPath)
+        .filter((p): p is string => typeof p === 'string' && p.length > 0);
+      projectPaths = [...new Set(paths)];
+      if (projectPaths.length > 0 && !selectedCwd) {
+        selectedCwd = projectPaths[0];
+      }
+    } catch {
+      // Silently ignore — paths are optional
+    }
+  }
+
+  function selectPreset(index: number): void {
+    selectedPreset = index;
+  }
+
+  function isCustom(): boolean {
+    return presets[selectedPreset].command === '';
+  }
+
+  function getCommand(): string {
+    if (isCustom()) {return customCommand.trim().split(/\s+/)[0] || '';}
+    return presets[selectedPreset].command;
+  }
+
+  function getArgs(): string[] {
+    if (isCustom()) {
+      const parts = customCommand.trim().split(/\s+/);
+      return parts.slice(1);
+    }
+    return presets[selectedPreset].args;
+  }
+
+  function getEffectiveCwd(): string {
+    const custom = customCwd.trim();
+    if (custom) {return custom;}
+    if (selectedCwd) {return selectedCwd;}
+    return '/tmp';
+  }
+
+  async function handleLaunch(): Promise<void> {
+    const command = getCommand();
+    if (!command) {return;}
+
+    launching = true;
+    launchError = '';
+    try {
+      const response = await fetch('/api/terminals', {
+        body: JSON.stringify({
+          args: getArgs(),
+          command,
+          cwd: getEffectiveCwd() || undefined,
+        }),
+        headers: {
+          Authorization: `Bearer ${apiKey}`,
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      });
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        launchError = data.error || `Failed to launch (${response.status})`;
+        return;
+      }
+
+      const result: TerminalResponse = await response.json();
+      onLaunch(result);
+    } catch {
+      launchError = 'Network error — is the server running?';
+    } finally {
+      launching = false;
+    }
+  }
+</script>
+
+<Sheet
+  bind:open
+  title="New Terminal"
+  side="bottom"
+  onclose={onClose}
+  classes="launch-sheet"
+>
+  {#snippet content()}
+    <div class="launch-form">
+      <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) => { 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>
+      </div>
+
+      {#if isCustom()}
+        <div class="section">
+          <Input
+            label="Custom Command"
+            bind:value={customCommand}
+            dataType="text"
+            placeholder="e.g. node server.js"
+            classes="input-mono launch-input"
+          />
+        </div>
+      {/if}
+
+      <Button
+        classes="btn-launch"
+        disabled={launching || (!isCustom() ? false : !customCommand.trim())}
+        onclick={handleLaunch}
+        showLoader={launching}
+        text={launching ? 'Launching...' : 'Launch Terminal'}
+      />
+
+      {#if launchError}
+        <Banner text={launchError} classes="banner-error launch-error-banner" />
+      {/if}
+    </div>
+  {/snippet}
+</Sheet>
+
+<style>
+  :global(.launch-sheet) {
+    --sheet-background: var(--ds-gray-100);
+    --sheet-overlay-background: rgba(0, 0, 0, 0.6);
+    --sheet-overlay-z-index: 200;
+    --sheet-z-index: 201;
+    --sheet-height: auto;
+    --sheet-max-height: 90vh;
+    --sheet-box-shadow: 0 -4px 20px 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-content-padding: 0 var(--space-5) calc(var(--space-8, 32px) + env(safe-area-inset-bottom, 0px));
+    --sheet-close-button-color: var(--text-secondary);
+    --sheet-close-button-hover-background: var(--component-bg-hover);
+    --sheet-border: none;
+  }
+
+  /* Desktop: max width */
+  @media (min-width: 768px) {
+    :global(.launch-sheet) {
+      --sheet-max-width: 480px;
+    }
+  }
+
+  .launch-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .section-label {
+    display: block;
+    font-size: var(--text-xs);
+    font-weight: 500;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .preset-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-2);
+  }
+
+  :global(.preset-choice) {
+    --choicebox-padding: var(--space-3) var(--space-2);
+    --choicebox-min-height: 48px;
+    --choicebox-title-font-size: var(--text-sm);
+    --choicebox-title-font-weight: 500;
+    --choicebox-indicator-size: 16px;
+    --choicebox-radio-inner-size: 8px;
+  }
+
+  .custom-cwd-group {
+    margin-top: var(--space-2);
+  }
+
+  :global(.launch-select) {
+    --select-height: 44px;
+  }
+
+  :global(.launch-input) {
+    --input-container-margin: 0;
+  }
+
+  :global(.btn-launch) {
+    --button-color: var(--ds-green-700);
+    --button-text-color: #fff;
+    --button-hover-color: var(--ds-green-900);
+    --button-hover-text-color: #fff;
+    --button-border-radius: var(--radius-lg);
+    --button-height: 48px;
+    --button-width: 100%;
+    margin-top: var(--space-2);
+  }
+
+  :global(.launch-error-banner) {
+    margin-top: var(--space-3);
+  }
+</style>

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

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { Button } from '@juspay/svelte-ui-components';
+
+  interface Props {
+    onKey: (key: string) => void;
+  }
+
+  interface QuickKey {
+    escape: string;
+    label: string;
+  }
+
+  const { onKey }: Props = $props();
+
+  const keys: QuickKey[] = [
+    { escape: '\x03', label: 'Ctrl+C' },
+    { escape: '\t', label: 'Tab' },
+    { escape: '\x1b[A', label: '\u2191' },
+    { escape: '\x1b[B', label: '\u2193' },
+    { escape: '\x1b', label: 'Esc' },
+    { escape: '\x04', label: 'Ctrl+D' },
+    { escape: '\x1a', label: 'Ctrl+Z' },
+  ];
+</script>
+
+<div class="quick-keys" role="toolbar" aria-label="Quick terminal keys">
+  {#each keys as k (k.label)}
+    <Button
+      classes="btn-quick-key"
+      onclick={() => { onKey(k.escape); }}
+      text={k.label}
+    />
+  {/each}
+</div>
+
+<style>
+  .quick-keys {
+    display: flex;
+    overflow-x: auto;
+    gap: 6px;
+    padding: var(--space-2) var(--space-3);
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    flex-shrink: 0;
+  }
+
+  .quick-keys::-webkit-scrollbar {
+    display: none;
+  }
+
+  :global(.btn-quick-key) {
+    --button-color: #1e293b;
+    --button-text-color: #94a3b8;
+    --button-border: 1px solid var(--ds-gray-400);
+    --button-hover-color: #334155;
+    --button-hover-text-color: #e2e8f0;
+    --button-hover-border: 1px solid var(--ds-gray-400);
+    --button-height: 44px;
+    --button-padding: 0 var(--space-3);
+    --button-border-radius: var(--radius-md);
+    --button-font-family: var(--font-mono);
+    --button-font-size: var(--text-xs);
+    min-width: 52px;
+    flex-shrink: 0;
+    white-space: nowrap;
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+  }
+</style>

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

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { KeyboardInput, Modal } from '@juspay/svelte-ui-components';
+  import { getShortcutList } from './keyboard-shortcuts';
+
+  interface Props {
+    onClose: () => void;
+    open: boolean;
+  }
+
+  const { onClose, open }: Props = $props();
+  const shortcuts = getShortcutList();
+</script>
+
+{#if open}
+  <Modal
+    header={{ text: 'Keyboard Shortcuts' }}
+    onoverlayClick={onClose}
+    classes="shortcuts-modal"
+  >
+    {#snippet content()}
+      <div class="shortcuts-list">
+        {#each shortcuts as shortcut (shortcut.keys)}
+          <div class="shortcut-row">
+            <span class="shortcut-desc">{shortcut.description}</span>
+            <KeyboardInput keys={shortcut.keys} classes="shortcut-kbd" />
+          </div>
+        {/each}
+      </div>
+    {/snippet}
+  </Modal>
+{/if}
+
+<style>
+  :global(.shortcuts-modal) {
+    --modal-content-background-color: var(--component-bg);
+    --modal-border-radius: var(--radius-lg);
+    --modal-header-background-color: var(--component-bg);
+    --modal-header-padding: var(--space-4) var(--space-5);
+    --modal-header-border-bottom: 1px solid var(--border);
+    --header-text-size: var(--text-lg);
+    --modal-header-text-weight: 600;
+    --background-color: rgba(0, 0, 0, 0.5);
+    --modal-z-index: 1000;
+  }
+
+  :global(.shortcuts-modal .modal-content) {
+    max-width: 420px;
+    width: 90vw;
+    min-width: 320px;
+  }
+
+  .shortcuts-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-4) var(--space-5);
+  }
+
+  .shortcut-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-2) 0;
+  }
+
+  .shortcut-desc {
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+  }
+
+  :global(.shortcut-kbd) {
+    --keyboard-input-key-color: var(--text-primary);
+    --keyboard-input-key-background: var(--ds-gray-200);
+    --keyboard-input-key-border: 1px solid var(--ds-gray-400);
+    --keyboard-input-key-box-shadow: 0 1px 0 var(--ds-gray-400);
+    --keyboard-input-font-family: var(--font-mono);
+    --keyboard-input-font-size: var(--text-xs);
+  }
+</style>

package/src/lib/modules/client/terminal/keyboard-shortcuts.ts

@@ -0,0 +1,70 @@
+/**
+ * Keyboard shortcuts for terminal pages.
+ *
+ * Platform detection: ⌘ on Mac/iPhone/iPad, Ctrl on others.
+ * Uses capture-phase window keydown to intercept before xterm.
+ */
+
+export const isMac =
+  typeof navigator !== 'undefined' &&
+  /Mac|iPhone|iPad/.test(navigator.userAgent);
+
+export const modLabel = isMac ? '⌘' : 'Ctrl';
+
+export interface ShortcutAction {
+  action: () => void;
+  description: string;
+  key: string;
+  label: string;
+  shift?: boolean;
+}
+
+interface ShortcutManagerOptions {
+  onHelp: () => void;
+}
+
+/** Returns true when focus is inside a text input, textarea, or contenteditable. */
+function isTextInputFocused(): boolean {
+  const el = document.activeElement;
+  if (!el) { return false; }
+  const tag = el.tagName;
+  if (tag === 'INPUT' || tag === 'TEXTAREA') { return true; }
+  if ((el as HTMLElement).isContentEditable) { return true; }
+  // xterm's terminal container
+  if (el.closest('.xterm')) { return true; }
+  return false;
+}
+
+export function createShortcutManager(options: ShortcutManagerOptions) {
+  function handler(e: KeyboardEvent) {
+    const mod = isMac ? e.metaKey : e.ctrlKey;
+    if (!mod) { return; }
+
+    // Don't intercept when a text input or the terminal is focused
+    if (isTextInputFocused()) { return; }
+
+    // Cmd+/ — show help overlay
+    if (e.key === '/') {
+      e.preventDefault();
+      e.stopPropagation();
+      options.onHelp();
+      return;
+    }
+  }
+
+  window.addEventListener('keydown', handler, true); // capture phase
+
+  return {
+    destroy() {
+      window.removeEventListener('keydown', handler, true);
+    },
+  };
+}
+
+/** List of all shortcuts for the help overlay. */
+export function getShortcutList(): { description: string; keys: string }[] {
+  return [
+    { description: 'Command palette', keys: `${modLabel}+K` },
+    { description: 'Keyboard shortcuts', keys: `${modLabel}+/` },
+  ];
+}