gigaclaw 1.4.0

package/lib/chat/components/message.jsx

@@ -0,0 +1,422 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Streamdown } from 'streamdown';
+import { cn } from '../utils.js';
+import { SpinnerIcon, FileTextIcon, CopyIcon, CheckIcon, RefreshIcon, SquarePenIcon, WrenchIcon, XIcon, ChevronDownIcon } from './icons.js';
+
+function LinkSafetyModal({ url, isOpen, onClose, onConfirm }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {}
+  }, [url]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+      onClick={onClose}
+    >
+      <div
+        className="relative mx-4 flex w-full flex-col gap-3 rounded-lg border border-border bg-background p-4 shadow-lg"
+        style={{ maxWidth: '340px' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="font-medium text-sm text-foreground">Open external link?</div>
+        <div className="break-all rounded bg-muted px-2.5 py-2 font-mono text-xs text-foreground">
+          {url}
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={handleCopy}
+            className="flex flex-1 items-center justify-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-muted"
+          >
+            {copied ? <CheckIcon size={12} /> : <CopyIcon size={12} />}
+            <span>{copied ? 'Copied' : 'Copy'}</span>
+          </button>
+          <button
+            onClick={() => { onConfirm(); onClose(); }}
+            className="flex flex-1 items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90"
+          >
+            <span>Open</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const linkSafety = {
+  enabled: true,
+  renderModal: (props) => <LinkSafetyModal {...props} />,
+};
+
+const TOOL_DISPLAY_NAMES = {
+  create_job: 'Create Job',
+  get_job_status: 'Check Job Status',
+  get_system_technical_specs: 'Read Tech Docs',
+  get_skill_building_guide: 'Read Skill Docs',
+  start_coding: 'Start Coding',
+  get_repository_details: 'Get Repository Details',
+};
+
+function getToolDisplayName(toolName) {
+  return TOOL_DISPLAY_NAMES[toolName] || toolName.replace(/_/g, ' ');
+}
+
+function formatContent(content) {
+  if (content == null) return null;
+  if (typeof content === 'string') {
+    try {
+      const parsed = JSON.parse(content);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return content;
+    }
+  }
+  return JSON.stringify(content, null, 2);
+}
+
+function ToolCall({ part }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const toolName = part.toolName || (part.type?.startsWith('tool-') ? part.type.slice(5) : 'tool');
+  const displayName = getToolDisplayName(toolName);
+  const state = part.state || 'input-available';
+
+  const isRunning = state === 'input-streaming' || state === 'input-available';
+  const isDone = state === 'output-available';
+  const isError = state === 'output-error';
+
+  // Auto-redirect when start_coding completes successfully.
+  // mountedDone captures whether the tool was already finished when the component
+  // first rendered (i.e. the user is revisiting a chat). In that case we skip the
+  // redirect so they can still read the conversation.
+  const mountedDone = useRef(isDone);
+  useEffect(() => {
+    if (toolName !== 'start_coding' || !isDone || mountedDone.current) return;
+    try {
+      const output = typeof part.output === 'string' ? JSON.parse(part.output) : part.output;
+      if (output?.success && output?.workspaceUrl) {
+        window.location.href = output.workspaceUrl;
+      }
+    } catch {}
+  }, [toolName, isDone, part.output]);
+
+  return (
+    <div className="my-1 rounded-lg border border-border bg-background">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-muted/50 rounded-lg"
+      >
+        <WrenchIcon size={14} className="text-muted-foreground shrink-0" />
+        <span className="font-medium text-foreground">{displayName}</span>
+        <span className="ml-auto flex items-center gap-1.5 text-xs text-muted-foreground">
+          {isRunning && (
+            <>
+              <SpinnerIcon size={12} />
+              <span>Running...</span>
+            </>
+          )}
+          {isDone && (
+            <>
+              <CheckIcon size={12} className="text-green-500" />
+              <span>Done</span>
+            </>
+          )}
+          {isError && (
+            <>
+              <XIcon size={12} className="text-red-500" />
+              <span>Error</span>
+            </>
+          )}
+        </span>
+        <ChevronDownIcon
+          size={14}
+          className={cn(
+            'text-muted-foreground transition-transform shrink-0',
+            expanded && 'rotate-180'
+          )}
+        />
+      </button>
+
+      {expanded && (
+        <div className="border-t border-border px-3 py-2 text-xs">
+          {part.input != null && (
+            <div className="mb-2">
+              <div className="font-medium text-muted-foreground mb-1">Input</div>
+              <pre className="whitespace-pre-wrap break-all rounded bg-muted p-2 text-foreground overflow-x-auto">
+                {formatContent(part.input)}
+              </pre>
+            </div>
+          )}
+          {part.output != null && (
+            <div>
+              <div className="font-medium text-muted-foreground mb-1">Output</div>
+              <pre className="whitespace-pre-wrap break-all rounded bg-muted p-2 text-foreground overflow-x-auto max-h-64 overflow-y-auto">
+                {formatContent(part.output)}
+              </pre>
+            </div>
+          )}
+          {part.input == null && part.output == null && (
+            <div className="text-muted-foreground italic">Waiting for data...</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function PreviewMessage({ message, isLoading, onRetry, onEdit }) {
+  const isUser = message.role === 'user';
+  const [copied, setCopied] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [editText, setEditText] = useState('');
+  const textareaRef = useRef(null);
+
+  // Extract text from parts (AI SDK v5+) or fall back to content
+  const text =
+    message.parts
+      ?.filter((p) => p.type === 'text')
+      .map((p) => p.text)
+      .join('\n') ||
+    message.content ||
+    '';
+
+  // Extract file parts
+  const fileParts = message.parts?.filter((p) => p.type === 'file') || [];
+  const imageParts = fileParts.filter((p) => p.mediaType?.startsWith('image/'));
+  const otherFileParts = fileParts.filter((p) => !p.mediaType?.startsWith('image/'));
+  const hasToolParts = message.parts?.some((p) => p.type?.startsWith('tool-')) || false;
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {}
+  };
+
+  const handleEditStart = () => {
+    setEditText(text);
+    setEditing(true);
+  };
+
+  const handleEditCancel = () => {
+    setEditing(false);
+    setEditText('');
+  };
+
+  const handleEditSubmit = () => {
+    const trimmed = editText.trim();
+    if (trimmed && trimmed !== text) {
+      onEdit?.(message, trimmed);
+    }
+    setEditing(false);
+    setEditText('');
+  };
+
+  // Auto-resize and focus textarea when entering edit mode
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      const ta = textareaRef.current;
+      ta.focus();
+      ta.style.height = 'auto';
+      ta.style.height = `${ta.scrollHeight}px`;
+      // Move cursor to end
+      ta.setSelectionRange(ta.value.length, ta.value.length);
+    }
+  }, [editing]);
+
+  return (
+    <div
+      className={cn(
+        'group flex gap-4 w-full',
+        isUser ? 'justify-end' : 'justify-start'
+      )}
+    >
+      <div className={cn('flex flex-col', isUser ? 'max-w-[80%]' : 'w-full')}>
+        {editing ? (
+          <div className="flex flex-col gap-2">
+            <textarea
+              ref={textareaRef}
+              value={editText}
+              onChange={(e) => {
+                setEditText(e.target.value);
+                e.target.style.height = 'auto';
+                e.target.style.height = `${e.target.scrollHeight}px`;
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  handleEditSubmit();
+                }
+                if (e.key === 'Escape') {
+                  handleEditCancel();
+                }
+              }}
+              className="w-full resize-none rounded-xl border border-border bg-muted px-4 py-3 text-sm leading-relaxed text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+              rows={1}
+            />
+            <div className="flex justify-end gap-2">
+              <button
+                onClick={handleEditCancel}
+                className="rounded-md px-3 py-1 text-xs text-muted-foreground hover:text-foreground"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleEditSubmit}
+                className="rounded-md bg-primary px-3 py-1 text-xs text-primary-foreground hover:opacity-80"
+              >
+                Send
+              </button>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div
+              className={cn(
+                'text-sm leading-relaxed',
+                isUser
+                  ? 'rounded-xl px-4 py-3 bg-muted text-foreground'
+                  : 'text-foreground'
+              )}
+            >
+              {isUser ? (
+                <>
+                  {imageParts.length > 0 && (
+                    <div className="mb-2 flex flex-wrap gap-2">
+                      {imageParts.map((part, i) => (
+                        <img
+                          key={i}
+                          src={part.url}
+                          alt="attachment"
+                          className="max-h-64 max-w-full rounded-lg object-contain"
+                        />
+                      ))}
+                    </div>
+                  )}
+                  {otherFileParts.length > 0 && (
+                    <div className="mb-2 flex flex-wrap gap-2">
+                      {otherFileParts.map((part, i) => (
+                        <div
+                          key={i}
+                          className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs bg-foreground/10"
+                        >
+                          <FileTextIcon size={12} />
+                          <span className="max-w-[150px] truncate">
+                            {part.name || part.mediaType || 'file'}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {text ? (
+                    <div className="whitespace-pre-wrap break-words">{text}</div>
+                  ) : null}
+                </>
+              ) : (
+                <>
+                  {message.parts?.length > 0 ? (
+                    message.parts.map((part, i) => {
+                      if (part.type === 'text') {
+                        return <Streamdown key={i} mode={isLoading ? 'streaming' : 'static'} linkSafety={linkSafety}>{part.text}</Streamdown>;
+                      }
+                      if (part.type === 'file') {
+                        if (part.mediaType?.startsWith('image/')) {
+                          return (
+                            <div key={i} className="mb-2">
+                              <img src={part.url} alt="attachment" className="max-h-64 max-w-full rounded-lg object-contain" />
+                            </div>
+                          );
+                        }
+                        return (
+                          <div key={i} className="mb-2 inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs bg-foreground/10">
+                            <FileTextIcon size={12} />
+                            <span className="max-w-[150px] truncate">{part.name || part.mediaType || 'file'}</span>
+                          </div>
+                        );
+                      }
+                      if (part.type?.startsWith('tool-')) {
+                        return <ToolCall key={part.toolCallId || i} part={part} />;
+                      }
+                      return null;
+                    })
+                  ) : text ? (
+                    <Streamdown mode={isLoading ? 'streaming' : 'static'} linkSafety={linkSafety}>{text}</Streamdown>
+                  ) : isLoading && !hasToolParts ? (
+                    <div className="flex items-center gap-2 text-muted-foreground">
+                      <SpinnerIcon size={14} />
+                      <span>Working...</span>
+                    </div>
+                  ) : null}
+                </>
+              )}
+            </div>
+
+            {/* Action toolbar */}
+            {!isLoading && text && (
+              <div
+                className={cn(
+                  'flex gap-1 mt-1 opacity-0 transition-opacity group-hover:opacity-100',
+                  isUser ? 'justify-end' : 'justify-start'
+                )}
+              >
+                <button
+                  onClick={handleCopy}
+                  className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-muted"
+                  aria-label="Copy message"
+                >
+                  {copied ? <CheckIcon size={14} /> : <CopyIcon size={14} />}
+                </button>
+                {onRetry && (
+                  <button
+                    onClick={() => onRetry(message)}
+                    className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-muted"
+                    aria-label="Retry"
+                  >
+                    <RefreshIcon size={14} />
+                  </button>
+                )}
+                {isUser && onEdit && (
+                  <button
+                    onClick={handleEditStart}
+                    className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-muted"
+                    aria-label="Edit message"
+                  >
+                    <SquarePenIcon size={14} />
+                  </button>
+                )}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function ThinkingMessage() {
+  return (
+    <div className="flex gap-4 w-full justify-start">
+      <div className="flex items-center gap-2 px-4 py-3 text-sm text-muted-foreground">
+        <SpinnerIcon size={14} />
+        <span>Thinking...</span>
+      </div>
+    </div>
+  );
+}

package/lib/chat/components/messages.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from "react";
+import { PreviewMessage, ThinkingMessage } from "./message.js";
+import { Greeting } from "./greeting.js";
+import { ArrowDown } from "lucide-react";
+function Messages({ messages, status, onRetry, onEdit }) {
+  const containerRef = useRef(null);
+  const endRef = useRef(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  useEffect(() => {
+    if (isAtBottom && endRef.current) {
+      endRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages, status, isAtBottom]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      setIsAtBottom(scrollHeight - scrollTop - clientHeight < 40);
+    };
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, []);
+  const scrollToBottom = () => {
+    endRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 touch-pan-y overflow-y-auto",
+        ref: containerRef,
+        children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex min-w-0 max-w-4xl flex-col gap-4 px-4 py-4 md:gap-6 md:px-6", children: [
+          messages.length === 0 && /* @__PURE__ */ jsx(Greeting, {}),
+          messages.map((message, index) => /* @__PURE__ */ jsx(
+            PreviewMessage,
+            {
+              message,
+              isLoading: status === "streaming" && index === messages.length - 1,
+              onRetry,
+              onEdit
+            },
+            message.id
+          )),
+          status === "submitted" && /* @__PURE__ */ jsx(ThinkingMessage, {}),
+          /* @__PURE__ */ jsx("div", { className: "min-h-[24px] shrink-0", ref: endRef })
+        ] })
+      }
+    ),
+    !isAtBottom && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "absolute bottom-4 left-1/2 z-10 -translate-x-1/2 rounded-full border border-border bg-background p-2 shadow-lg hover:bg-muted",
+        onClick: scrollToBottom,
+        "aria-label": "Scroll to bottom",
+        children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" })
+      }
+    )
+  ] });
+}
+export {
+  Messages
+};

package/lib/chat/components/messages.jsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useRef, useEffect, useState } from 'react';
+import { PreviewMessage, ThinkingMessage } from './message.js';
+import { Greeting } from './greeting.js';
+import { ArrowDown } from 'lucide-react';
+
+export function Messages({ messages, status, onRetry, onEdit }) {
+  const containerRef = useRef(null);
+  const endRef = useRef(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (isAtBottom && endRef.current) {
+      endRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [messages, status, isAtBottom]);
+
+  // Track scroll position
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      setIsAtBottom(scrollHeight - scrollTop - clientHeight < 40);
+    };
+
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToBottom = () => {
+    endRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  return (
+    <div className="relative flex-1">
+      <div
+        className="absolute inset-0 touch-pan-y overflow-y-auto"
+        ref={containerRef}
+      >
+        <div className="mx-auto flex min-w-0 max-w-4xl flex-col gap-4 px-4 py-4 md:gap-6 md:px-6">
+          {messages.length === 0 && <Greeting />}
+
+          {messages.map((message, index) => (
+            <PreviewMessage
+              key={message.id}
+              message={message}
+              isLoading={status === 'streaming' && index === messages.length - 1}
+              onRetry={onRetry}
+              onEdit={onEdit}
+            />
+          ))}
+
+          {status === 'submitted' && <ThinkingMessage />}
+
+          <div className="min-h-[24px] shrink-0" ref={endRef} />
+        </div>
+      </div>
+
+      {!isAtBottom && (
+        <button
+          className="absolute bottom-4 left-1/2 z-10 -translate-x-1/2 rounded-full border border-border bg-background p-2 shadow-lg hover:bg-muted"
+          onClick={scrollToBottom}
+          aria-label="Scroll to bottom"
+        >
+          <ArrowDown className="size-4" />
+        </button>
+      )}
+    </div>
+  );
+}

package/lib/chat/components/notifications-page.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Streamdown } from "streamdown";
+import { PageLayout } from "./page-layout.js";
+import { BellIcon } from "./icons.js";
+import { linkSafety } from "./message.js";
+import { getNotifications, markNotificationsRead } from "../actions.js";
+function timeAgo(ts) {
+  const seconds = Math.floor((Date.now() - ts) / 1e3);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  return `${months}mo ago`;
+}
+function NotificationsPage({ session }) {
+  const [notifications, setNotifications] = useState([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    async function load() {
+      try {
+        const result = await getNotifications();
+        setNotifications(result);
+        await markNotificationsRead();
+      } catch (err) {
+        console.error("Failed to load notifications:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+  return /* @__PURE__ */ jsxs(PageLayout, { session, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-6", children: /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Notifications" }) }),
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-4", children: [
+      notifications.length,
+      " ",
+      notifications.length === 1 ? "notification" : "notifications"
+    ] }),
+    loading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-14 animate-pulse rounded-md bg-border/50" }, i)) }) : notifications.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-8 text-center", children: "No notifications yet." }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: notifications.map((n) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-4 border border-border rounded-lg", children: [
+      /* @__PURE__ */ jsx("div", { className: "mt-0.5 shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(BellIcon, { size: 16 }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm prose-sm", children: /* @__PURE__ */ jsx(Streamdown, { mode: "static", linkSafety, children: n.notification }) }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: timeAgo(n.createdAt) })
+      ] })
+    ] }, n.id)) })
+  ] });
+}
+export {
+  NotificationsPage
+};