shraga 0.0.3 → 0.1.2

package/src/client/components/MessageInput.tsx

@@ -0,0 +1,263 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { SendHorizontal, Paperclip, X, Square, FileText } from 'lucide-react';
+import { Button } from './ui/button';
+import { AutocompleteTextarea, type AutocompleteTextareaHandle } from './AutocompleteTextarea';
+import { AuthedImage } from './AuthedImage';
+import { useSlots } from '@/lib/slots';
+import type { Attachment } from '@/hooks/useConversation';
+
+export interface MessageInputHandle {
+  prefill: (text: string) => void;
+  /** Set the input text without stealing focus (used for live external transcription). */
+  setText: (text: string) => void;
+  focus: () => void;
+}
+
+const DRAFT_PREFIX = 'shraga:draft:';
+
+function saveDraft(sessionId: string | undefined, text: string) {
+  const key = DRAFT_PREFIX + (sessionId ?? 'new');
+  if (text.trim()) localStorage.setItem(key, text);
+  else localStorage.removeItem(key);
+}
+
+function loadDraft(sessionId: string | undefined): string {
+  return localStorage.getItem(DRAFT_PREFIX + (sessionId ?? 'new')) ?? '';
+}
+
+function clearDraft(sessionId: string | undefined) {
+  localStorage.removeItem(DRAFT_PREFIX + (sessionId ?? 'new'));
+}
+
+interface Props {
+  onSend: (text: string, attachments?: Attachment[]) => void;
+  onSteer: (text: string) => void;
+  onQueue: (text: string) => void;
+  onRemoveQueued: (index: number) => void;
+  queue: string[];
+  onUpload: (file: File) => Promise<Attachment | null>;
+  onCancel: () => void;
+  disabled?: boolean;
+  busy?: boolean;
+  skills?: string[];
+  workspaceFiles?: string[];
+  sessionId?: string;
+  /** Opaque per-pane handle passed straight through to the inputAdornments slot; unused in core. */
+  inputCtx?: unknown;
+}
+
+export const MessageInput = forwardRef<MessageInputHandle, Props>(function MessageInput(
+  { onSend, onSteer, onQueue, onRemoveQueued, queue, onUpload, onCancel, disabled, busy, skills = [], workspaceFiles = [], sessionId, inputCtx },
+  ref,
+) {
+  const slots = useSlots();
+  const [text, setText] = useState(() => loadDraft(sessionId));
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const fileRef = useRef<HTMLInputElement>(null);
+  const acRef = useRef<AutocompleteTextareaHandle>(null);
+  const sessionIdRef = useRef(sessionId);
+
+  useEffect(() => {
+    if (sessionIdRef.current === sessionId) return;
+    const prevId = sessionIdRef.current;
+    sessionIdRef.current = sessionId;
+    // New chat: carry current draft forward instead of saving to old session
+    if (!sessionId) {
+      clearDraft(prevId);
+      saveDraft(undefined, text);
+      return;
+    }
+    saveDraft(prevId, text);
+    const restored = loadDraft(sessionId);
+    setText(restored);
+    acRef.current?.setValue(restored);
+  }, [sessionId]);
+
+  const setTextAndSave = useCallback((value: string) => {
+    setText(value);
+    saveDraft(sessionIdRef.current, value);
+  }, []);
+
+  useImperativeHandle(ref, () => ({
+    prefill(value: string) {
+      setTextAndSave(value);
+      acRef.current?.setValue(value);
+      acRef.current?.focus();
+    },
+    setText(value: string) {
+      setTextAndSave(value);
+      acRef.current?.setValue(value);
+    },
+    focus() {
+      acRef.current?.focus();
+    },
+  }));
+
+  const submit = (mode: 'send' | 'steer' | 'queue' = 'send') => {
+    const trimmed = text.trim();
+    if (!trimmed && attachments.length === 0) return;
+    if (mode === 'steer') onSteer(trimmed);
+    else if (mode === 'queue') onQueue(trimmed);
+    else onSend(trimmed, attachments.length > 0 ? attachments : undefined);
+    setText('');
+    clearDraft(sessionIdRef.current);
+    setAttachments([]);
+    acRef.current?.setValue('');
+  };
+
+  // Mobile = coarse primary pointer (phone/tablet). Touchscreen laptops keep a fine pointer, so Enter still submits there.
+  const isTouchDevice = typeof window !== 'undefined' && window.matchMedia?.('(pointer: coarse)').matches;
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey && (!isTouchDevice || e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      submit(busy ? 'steer' : 'send');
+      return;
+    }
+    if (e.key === 'Tab' && busy && text.trim()) {
+      e.preventDefault();
+      submit('queue');
+      return;
+    }
+  };
+
+  const uploadFile = useCallback(async (file: File) => {
+    setUploading(true);
+    try {
+      const att = await onUpload(file);
+      if (att) setAttachments((prev) => [...prev, att]);
+    } finally {
+      setUploading(false);
+    }
+  }, [onUpload]);
+
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    const items = Array.from(e.clipboardData.items);
+    for (const item of items) {
+      if (item.type.startsWith('image/') || item.type === 'application/pdf') {
+        const file = item.getAsFile();
+        if (file) uploadFile(file);
+      }
+    }
+  }, [uploadFile]);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    uploadFile(file);
+    e.target.value = '';
+  };
+
+  return (
+    // paddingBottom: the input's own background continues into the iOS home-indicator strip (no-op on web).
+    <div className="border-t bg-background" style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}>
+      <div className="max-w-3xl mx-auto px-2 sm:px-4 py-3">
+        {(attachments.length > 0 || uploading) && (
+          <div className="flex gap-2 mb-2 flex-wrap items-center">
+            {attachments.map((att, i) => (
+              <div key={i} className="relative group">
+                {att.mimeType.startsWith('image/') ? (
+                  <AuthedImage src={att.url} alt={att.name} className="h-16 w-16 object-cover rounded-lg border" />
+                ) : (
+                  <div className="h-16 px-3 flex items-center gap-2 rounded-lg border bg-muted/50 text-xs text-muted-foreground">
+                    <FileText className="w-4 h-4 shrink-0" />
+                    <span className="truncate max-w-[120px]">{att.name}</span>
+                  </div>
+                )}
+                <button
+                  onClick={() => setAttachments((prev) => prev.filter((_, j) => j !== i))}
+                  className="absolute -top-1.5 -right-1.5 bg-destructive text-destructive-foreground rounded-full w-5 h-5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-sm"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              </div>
+            ))}
+            {uploading && <span className="text-xs text-muted-foreground animate-pulse">Uploading…</span>}
+          </div>
+        )}
+
+        <div className="flex items-center gap-2 bg-muted/50 rounded-xl border px-3 py-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-9 w-9 sm:h-8 sm:w-8 shrink-0"
+            onClick={() => fileRef.current?.click()}
+            disabled={disabled}
+            title="Attach file or image"
+          >
+            <Paperclip className="w-4 h-4" />
+          </Button>
+          <input ref={fileRef} type="file" className="hidden" onChange={handleFileChange} />
+
+          <AutocompleteTextarea
+            ref={acRef}
+            value={text}
+            onChange={setTextAndSave}
+            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
+            skills={skills}
+            workspaceFiles={workspaceFiles}
+            placeholder={busy ? 'Steer or queue…' : 'Message Claude…'}
+            disabled={disabled}
+            rows={1}
+            className="w-full bg-transparent border-none outline-none resize-none text-sm py-1.5 placeholder:text-muted-foreground min-h-[28px] max-h-[200px]"
+          />
+
+          {slots.inputAdornments?.(inputCtx)}
+
+          {busy ? (
+            <div className="flex items-center gap-2">
+              {text.trim() && (
+                <Button
+                  size="icon"
+                  className="h-9 w-9 sm:h-8 sm:w-8 shrink-0 rounded-lg"
+                  onClick={() => submit('steer')}
+                  title="Steer (inject into current turn)"
+                >
+                  <SendHorizontal className="w-4 h-4" />
+                </Button>
+              )}
+              <Button
+                variant="destructive"
+                size="icon"
+                className="h-9 w-9 sm:h-8 sm:w-8 shrink-0 rounded-lg"
+                onClick={() => onCancel()}
+                title="Stop generation"
+              >
+                <Square className="w-3.5 h-3.5" />
+              </Button>
+            </div>
+          ) : (
+            <Button
+              size="icon"
+              className="h-9 w-9 sm:h-8 sm:w-8 shrink-0 rounded-lg"
+              onClick={() => submit()}
+              disabled={disabled || uploading || (!text.trim() && attachments.length === 0)}
+            >
+              <SendHorizontal className="w-4 h-4" />
+            </Button>
+          )}
+        </div>
+
+        {queue.length > 0 && (
+          <div className="flex gap-1.5 flex-wrap mt-2">
+            {queue.map((q, i) => (
+              <span key={i} className="inline-flex items-center gap-1 rounded-full bg-blue-50 dark:bg-blue-950/40 px-2.5 py-1 text-xs text-blue-700 dark:text-blue-300 ring-1 ring-inset ring-blue-600/20 dark:ring-blue-400/30">
+                <span className="truncate max-w-[200px]">{q}</span>
+                <button onClick={() => onRemoveQueued(i)} className="hover:text-blue-900 dark:hover:text-blue-100">
+                  <X className="w-3 h-3" />
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+        <p className="text-[10px] text-muted-foreground text-center mt-2">
+          {busy
+            ? 'Enter to steer (redirect) · Tab to queue (after done) · Shift+Enter for newline'
+            : 'Enter to send · Shift+Enter for newline · @ for skills · / for commands'}
+        </p>
+      </div>
+    </div>
+  );
+});

package/src/client/components/OAuthConsent.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import { Bot, ShieldCheck } from 'lucide-react';
+import { Button } from './ui/button';
+
+/**
+ * OAuth consent screen for the embedded MCP Authorization Server.
+ * Rendered when the SPA is loaded at /oauth/authorize (claude.ai's authorization redirect).
+ * The user is already authenticated by the app's auth layer (provider-agnostic) — here they
+ * just approve the connection, which mints an auth code server-side and redirects back.
+ */
+export function OAuthConsent({ getToken, userEmail }: { getToken: () => Promise<string | null>; userEmail: string }) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  const params = new URLSearchParams(window.location.search);
+  const clientId = params.get('client_id') || '';
+  const redirectUri = params.get('redirect_uri') || '';
+  const state = params.get('state') || '';
+  const codeChallenge = params.get('code_challenge') || '';
+  const codeChallengeMethod = params.get('code_challenge_method') || 'S256';
+  const resource = params.get('resource') || '';
+  const clientName = params.get('client_name') || 'An MCP client';
+
+  const missing = !clientId || !redirectUri || !codeChallenge;
+
+  async function approve() {
+    setBusy(true);
+    setError('');
+    try {
+      const token = await getToken();
+      if (!token) throw new Error('Not signed in');
+      const res = await fetch('/oauth/authorize/consent', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+        body: JSON.stringify({
+          client_id: clientId,
+          redirect_uri: redirectUri,
+          code_challenge: codeChallenge,
+          code_challenge_method: codeChallengeMethod,
+          resource,
+        }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error_description || data.error || `Request failed (${res.status})`);
+      }
+      const { code } = await res.json();
+      const url = new URL(redirectUri);
+      url.searchParams.set('code', code);
+      if (state) url.searchParams.set('state', state);
+      window.location.href = url.toString();
+    } catch (e: any) {
+      setError(e.message || 'Authorization failed');
+      setBusy(false);
+    }
+  }
+
+  function deny() {
+    if (!redirectUri) return;
+    try {
+      const url = new URL(redirectUri);
+      url.searchParams.set('error', 'access_denied');
+      if (state) url.searchParams.set('state', state);
+      window.location.href = url.toString();
+    } catch { /* invalid redirect — nothing to navigate to */ }
+  }
+
+  return (
+    <div className="flex h-full items-center justify-center bg-background">
+      <div className="flex flex-col items-center gap-5 p-8 rounded-xl border bg-card shadow-sm w-full max-w-sm">
+        <div className="flex items-center gap-2">
+          <div className="flex items-center justify-center w-11 h-11 rounded-full bg-primary text-primary-foreground">
+            <Bot className="w-5 h-5" />
+          </div>
+          <ShieldCheck className="w-5 h-5 text-muted-foreground" />
+        </div>
+        <div className="text-center">
+          <h1 className="text-lg font-semibold">Authorize connection</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            <span className="font-medium text-foreground">{clientName}</span> wants to connect to your Shraga agent and
+            access it on your behalf.
+          </p>
+        </div>
+
+        <p className="text-xs text-muted-foreground">Signed in as {userEmail}</p>
+
+        {missing && (
+          <p className="text-sm text-destructive text-center">Invalid authorization request — missing parameters.</p>
+        )}
+        {error && <p className="text-sm text-destructive text-center">{error}</p>}
+
+        <div className="flex gap-2 w-full">
+          <Button variant="outline" className="flex-1" onClick={deny} disabled={busy}>
+            Deny
+          </Button>
+          <Button className="flex-1" onClick={approve} disabled={busy || missing}>
+            {busy ? 'Authorizing…' : 'Approve'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/SchedulesManager.tsx

@@ -0,0 +1,99 @@
+import { useState, useImperativeHandle, forwardRef } from 'react';
+import { Clock } from 'lucide-react';
+import { Button } from './ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
+import { useSchedules } from '@/hooks/useSchedules';
+import { useAuth } from '@/hooks/useAuth';
+import { ScheduleList } from './schedules/ScheduleList';
+import { ScheduleEditor } from './schedules/ScheduleEditor';
+import type { Schedule } from '@/lib/schedule-types';
+
+export interface SchedulesManagerHandle {
+  open: () => void;
+}
+
+interface Props {
+  getToken: () => Promise<string | null>;
+  onOpenSession: (sessionId: string) => void;
+  refreshKey?: number;
+  runningIds?: Set<string>;
+  skills?: string[];
+  workspaceFiles?: string[];
+  trigger?: React.ReactNode;
+}
+
+export const SchedulesManager = forwardRef<SchedulesManagerHandle, Props>(function SchedulesManager({ getToken, onOpenSession, refreshKey = 0, runningIds = new Set(), skills = [], workspaceFiles = [], trigger }, ref) {
+  const [open, setOpen] = useState(false);
+  const { user } = useAuth();
+  const { schedules, serverRunningIds, create, update, remove, toggle, runNow, cancelRun } = useSchedules(getToken, open, refreshKey);
+
+  useImperativeHandle(ref, () => ({ open: () => setOpen(true) }), []);
+  const [editing, setEditing] = useState<Schedule | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [pendingRunIds, setPendingRunIds] = useState<Set<string>>(new Set());
+
+  const closeEditor = () => { setEditing(null); setCreating(false); };
+  const handleRunNow = async (id: string, override?: string) => {
+    setPendingRunIds((prev) => new Set(prev).add(id));
+    try {
+      return await runNow(id, override);
+    } finally {
+      setTimeout(() => {
+        setPendingRunIds((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+      }, 1500);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => { setOpen(o); if (!o) closeEditor(); }}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="ghost" size="icon" className="h-8 w-8" title="Scheduled Tasks">
+            <Clock className="w-4 h-4" />
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="max-w-[95vw] sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{creating ? 'New Schedule' : editing ? `Edit: ${editing.name}` : 'Scheduled Tasks'}</DialogTitle>
+        </DialogHeader>
+
+        {creating ? (
+          <ScheduleEditor
+            key="__new__"
+            onSave={async (s) => { await create(s); closeEditor(); }}
+            onCancel={closeEditor}
+            skills={skills}
+            workspaceFiles={workspaceFiles}
+          />
+        ) : editing ? (
+          <ScheduleEditor
+            key={editing.id}
+            initial={editing}
+            onSave={async (s) => { await update(editing.id, s); closeEditor(); }}
+            onCancel={closeEditor}
+            skills={skills}
+            workspaceFiles={workspaceFiles}
+          />
+        ) : (
+          <ScheduleList
+            schedules={schedules}
+            currentUserUid={user?.uid}
+            onCreate={() => setCreating(true)}
+            onEdit={(s) => setEditing(s)}
+            onDelete={(id) => { if (confirm('Delete this schedule?')) remove(id); }}
+            onToggle={toggle}
+            onRunNow={handleRunNow}
+            onCancel={cancelRun}
+            runningIds={new Set([...runningIds, ...serverRunningIds, ...pendingRunIds])}
+            onOpenRun={(sid) => { setOpen(false); onOpenSession(sid); }}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+});