-
+
+
+
+
+
+
Buddy helper
+
{helperSummary}
+
+
onOpenBuddy?.()}
+ className="inline-flex items-center gap-2 rounded-md border border-surface-700 px-2.5 py-1 text-xs text-surface-300 transition-colors hover:bg-surface-800 hover:text-surface-100"
+ disabled={!onOpenBuddy}
+ >
+
+
+
+ {(buddySuggestions ?? []).map((suggestion) => (
+ {
+ setInput(suggestion.prompt);
+ requestAnimationFrame(() => {
+ textareaRef.current?.focus();
+ adjustHeight();
+ });
+ }}
+ className="rounded-full border border-surface-700 px-3 py-1 text-xs text-surface-300 transition-colors hover:border-brand-500 hover:bg-surface-800 hover:text-surface-100"
+ >
+ {suggestion.label}
+
+ ))}
+
+
+
-
@@ -135,13 +233,12 @@ export function ChatInput({ conversationId }: ChatInputProps) {
adjustHeight();
}}
onKeyDown={handleKeyDown}
- placeholder="Message Claude Code..."
- rows={1}
+ placeholder="Message AG-Claw..."
+ rows={Math.max(1, estimatedRows)}
aria-label="Message"
className={cn(
- "flex-1 resize-none bg-transparent text-sm text-surface-100",
- "placeholder:text-surface-500 focus:outline-none",
- "min-h-[24px] max-h-[200px] py-0.5"
+ "min-h-[24px] max-h-[200px] flex-1 resize-none bg-transparent py-0.5 text-sm text-surface-100",
+ "placeholder:text-surface-500 focus:outline-none"
)}
/>
@@ -149,30 +246,29 @@ export function ChatInput({ conversationId }: ChatInputProps) {
-
) : (
-
)}
-
- Claude can make mistakes. Verify important information.
+
+ AG-Claw can make mistakes. Verify important information.
diff --git a/web/components/chat/ChatLayout.tsx b/web/components/chat/ChatLayout.tsx
index 8b3c903b..45630c2e 100644
--- a/web/components/chat/ChatLayout.tsx
+++ b/web/components/chat/ChatLayout.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
import { useChatStore } from "@/lib/store";
import { Sidebar } from "@/components/layout/Sidebar";
import { Header } from "@/components/layout/Header";
@@ -8,41 +8,124 @@ import { ChatWindow } from "./ChatWindow";
import { ChatInput } from "./ChatInput";
import { SkipToContent } from "@/components/a11y/SkipToContent";
import { AnnouncerProvider } from "@/components/a11y/Announcer";
+import { DesktopFileViewer } from "@/components/file-viewer/DesktopFileViewer";
+import { SettingsDialog } from "@/components/settings/SettingsDialog";
+import { CollaborationProvider } from "@/components/collaboration/CollaborationProvider";
+import { ResearchWorkbench } from "@/components/research/ResearchWorkbench";
+import { BuddyPanel } from "@/components/buddy/BuddyPanel";
+import { getBuddyProfile, getBuddySeed, getBuddySuggestions, type BuddyProfile } from "@/lib/buddy";
+
+const DEMO_USER = {
+ id: "local-user",
+ name: "Local Operator",
+ email: "local@example.com",
+ color: "#22c55e",
+ role: "owner" as const,
+};
+
+function extractMessageText(content: string | Array<{ type?: string; text?: string; content?: unknown }>) {
+ if (typeof content === "string") {
+ return content;
+ }
+ return content
+ .map((block) => {
+ if (block?.type === "text") {
+ return block.text ?? "";
+ }
+ if (block?.type === "tool_result" && typeof block.content === "string") {
+ return block.content;
+ }
+ return "";
+ })
+ .join("");
+}
export function ChatLayout() {
- const { conversations, createConversation, activeConversationId } = useChatStore();
+ const {
+ conversations,
+ createConversation,
+ activeConversationId,
+ buddyOpen,
+ openBuddy,
+ closeBuddy,
+ } = useChatStore();
+ const [buddyProfile, setBuddyProfile] = useState
(() => getBuddyProfile("agclaw-local-operator"));
+ const [pendingBuddyPrompt, setPendingBuddyPrompt] = useState("");
useEffect(() => {
if (conversations.length === 0) {
createConversation();
}
+ }, [conversations.length, createConversation]);
+
+ useEffect(() => {
+ setBuddyProfile(getBuddyProfile(getBuddySeed()));
}, []);
+ const activeConversation = useMemo(
+ () => conversations.find((conversation) => conversation.id === activeConversationId) ?? null,
+ [conversations, activeConversationId]
+ );
+
+ const latestPrompt = useMemo(() => {
+ const latestUserMessage = [...(activeConversation?.messages ?? [])]
+ .reverse()
+ .find((message) => message.role === "user");
+ return latestUserMessage ? extractMessageText(latestUserMessage.content) : "";
+ }, [activeConversation]);
+
+ const buddySuggestions = useMemo(
+ () => getBuddySuggestions(buddyProfile, latestPrompt),
+ [buddyProfile, latestPrompt]
+ );
+
return (
-
-
-
-
-
-
- {activeConversationId ? (
- <>
-
- Select or create a conversation
+
+
+
+
+
+
+
+
+ {activeConversationId ? (
+ <>
+
+
setPendingBuddyPrompt("")}
+ />
+
+ ) : (
+
+ Select or create a conversation
+
+ )}
+
+
+
{
+ setPendingBuddyPrompt(prompt);
+ closeBuddy();
+ }}
+ />
+
+
);
}
diff --git a/web/components/chat/ChatWindow.tsx b/web/components/chat/ChatWindow.tsx
index fc7c841f..adf126fb 100644
--- a/web/components/chat/ChatWindow.tsx
+++ b/web/components/chat/ChatWindow.tsx
@@ -1,6 +1,6 @@
-"use client";
+"use client";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
import { useChatStore } from "@/lib/store";
import { MessageBubble } from "./MessageBubble";
import { Bot } from "lucide-react";
@@ -13,7 +13,7 @@ export function ChatWindow({ conversationId }: ChatWindowProps) {
const bottomRef = useRef(null);
const { conversations } = useChatStore();
const conversation = conversations.find((c) => c.id === conversationId);
- const messages = conversation?.messages ?? [];
+ const messages = useMemo(() => conversation?.messages ?? [], [conversation]);
const isStreaming = messages.some((m) => m.status === "streaming");
@@ -33,7 +33,7 @@ export function ChatWindow({ conversationId }: ChatWindowProps) {
// Announce a short preview so screen reader users know a reply arrived
const preview = lastMsg.content.slice(0, 100);
setAnnouncement("");
- setTimeout(() => setAnnouncement(`Claude replied: ${preview}`), 50);
+ setTimeout(() => setAnnouncement(`AG-Claw replied: ${preview}`), 50);
}
prevLengthRef.current = messages.length;
}, [messages.length, messages]);
@@ -50,7 +50,7 @@ export function ChatWindow({ conversationId }: ChatWindowProps) {
How can I help?
- Start a conversation with Claude Code
+ Start a conversation with AG-Claw
@@ -60,25 +60,14 @@ export function ChatWindow({ conversationId }: ChatWindowProps) {
return (
- {/* Polite live region — announces when Claude finishes a reply */}
+ {/* Polite live region announces when AG-Claw finishes a reply. */}
{announcement}
@@ -92,3 +81,6 @@ export function ChatWindow({ conversationId }: ChatWindowProps) {
);
}
+
+
+
diff --git a/web/components/chat/MessageBubble.tsx b/web/components/chat/MessageBubble.tsx
index f4651e5a..123193a4 100644
--- a/web/components/chat/MessageBubble.tsx
+++ b/web/components/chat/MessageBubble.tsx
@@ -1,9 +1,10 @@
-"use client";
+"use client";
import { User, Bot, AlertCircle } from "lucide-react";
import { cn, extractTextContent } from "@/lib/utils";
import type { Message } from "@/lib/types";
import { MarkdownContent } from "./MarkdownContent";
+import { AnnotationBadge } from "@/components/collaboration/AnnotationBadge";
interface MessageBubbleProps {
message: Message;
@@ -20,9 +21,9 @@ export function MessageBubble({ message }: MessageBubbleProps) {
"flex gap-3 animate-fade-in",
isUser && "flex-row-reverse"
)}
- aria-label={isUser ? "You" : isError ? "Error from Claude" : "Claude"}
+ aria-label={isUser ? "You" : isError ? "Error from AG-Claw" : "AG-Claw"}
>
- {/* Avatar — purely decorative, role conveyed by article label */}
+ {/* Avatar — purely decorative, role conveyed by article label */}
)}
);
}
+
+
diff --git a/web/components/collaboration/AnnotationBadge.tsx b/web/components/collaboration/AnnotationBadge.tsx
index 648753cd..77add60d 100644
--- a/web/components/collaboration/AnnotationBadge.tsx
+++ b/web/components/collaboration/AnnotationBadge.tsx
@@ -18,7 +18,6 @@ export function AnnotationBadge({ messageId }: AnnotationBadgeProps) {
const annotations = ctx.annotations[messageId] ?? [];
const unresolved = annotations.filter((a) => !a.resolved);
- if (annotations.length === 0) return null;
return (
@@ -31,10 +30,14 @@ export function AnnotationBadge({ messageId }: AnnotationBadgeProps) {
? "bg-amber-900/30 border-amber-700/50 text-amber-300 hover:bg-amber-900/50"
: "bg-surface-800 border-surface-700 text-surface-400 hover:bg-surface-700"
)}
- title={`${annotations.length} comment${annotations.length !== 1 ? "s" : ""}`}
+ title={
+ annotations.length === 0
+ ? "Add comment"
+ : `${annotations.length} comment${annotations.length !== 1 ? "s" : ""}`
+ }
>
- {unresolved.length > 0 ? unresolved.length : annotations.length}
+ {annotations.length === 0 ? "Comment" : unresolved.length > 0 ? unresolved.length : annotations.length}
{open && (
diff --git a/web/components/collaboration/AnnotationThread.tsx b/web/components/collaboration/AnnotationThread.tsx
new file mode 100644
index 00000000..edb55cca
--- /dev/null
+++ b/web/components/collaboration/AnnotationThread.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Check, MessageSquareText, X } from "lucide-react";
+import { useCollaborationContext } from "./CollaborationProvider";
+import { measureCommentPreview } from "@/lib/pretextSpike";
+import { cn } from "@/lib/utils";
+
+interface AnnotationThreadProps {
+ messageId: string;
+ onClose: () => void;
+}
+
+function formatTimestamp(value: number) {
+ return new Intl.DateTimeFormat(undefined, {
+ month: "short",
+ day: "numeric",
+ hour: "2-digit",
+ minute: "2-digit",
+ }).format(value);
+}
+
+export function AnnotationThread({ messageId, onClose }: AnnotationThreadProps) {
+ const { annotations, addAnnotation, resolveAnnotation, replyAnnotation } = useCollaborationContext();
+ const [draft, setDraft] = useState("");
+ const [replyDrafts, setReplyDrafts] = useState
>({});
+
+ const thread = useMemo(() => annotations[messageId] ?? [], [annotations, messageId]);
+
+ return (
+
+
+
+
+ {thread.map((annotation) => (
+
+
+
+
{annotation.author.name}
+
{formatTimestamp(annotation.createdAt)}
+
+
resolveAnnotation(annotation.id, !annotation.resolved)}
+ className={cn(
+ "inline-flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors",
+ annotation.resolved
+ ? "bg-emerald-900/30 text-emerald-300 hover:bg-emerald-900/50"
+ : "bg-surface-800 text-surface-300 hover:bg-surface-700"
+ )}
+ >
+
+
+
+ {annotation.text}
+
+
+ {annotation.replies.length > 0 && (
+
+ {annotation.replies.map((reply) => (
+
+
{reply.author.name}
+
{formatTimestamp(reply.createdAt)}
+
{reply.text}
+
+ ))}
+
+ )}
+
+
+ {
+ const value = (replyDrafts[annotation.id] ?? "").trim();
+ if (!value) return;
+ replyAnnotation(annotation.id, value);
+ setReplyDrafts((current) => ({ ...current, [annotation.id]: "" }));
+ }}
+ className="rounded-md bg-surface-800 px-3 py-2 text-sm text-surface-200 transition-colors hover:bg-surface-700"
+ >
+ Send
+
+
+
+ ))}
+
+ {thread.length === 0 && (
+
+ No comments yet for this message.
+
+ )}
+
+
+
+
+ {
+ const value = draft.trim();
+ if (!value) return;
+ addAnnotation(messageId, value);
+ setDraft("");
+ }}
+ className="rounded-md bg-brand-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-brand-500"
+ >
+ Add
+
+
+
+
+
+
+
+
{activeTab.filename}
+
+ {measuredTitle?.truncated ?? "Workspace file viewer"}
+
+
+
+ {!activeTab.isImage && activeTab.mode !== "diff" && (
+
+
+ )}
+ closeTab(activeTab.id)}
+ className="rounded-md p-1.5 text-surface-500 transition-colors hover:bg-surface-800 hover:text-surface-200"
+ aria-label="Close file viewer"
+ >
+
+
+
+
+
+
+
+ {activeTab.isImage ? (
+
+ ) : activeTab.mode === "diff" && activeTab.diff ? (
+
+
{activeTab.diff.oldContent}
+
{activeTab.diff.newContent}
+
+ ) : activeTab.mode === "edit" ? (
+