- Your copilot can browse the web and act on your data — create tasks, update status, read your repos.
+ Your copilot can browse the web, act on your data, and look at photos or files you attach.
Try one:
@@ -107,6 +195,19 @@ export function CopilotChat() {
)}
>
{m.content}
+ {m.attachments && m.attachments.length > 0 && (
+
+ {m.attachments.map((a, j) => (
+
+ {a.kind === "image" ? : }
+ {a.name}
+
+ ))}
+
+ )}
{labels.length > 0 && (
@@ -134,6 +235,29 @@ export function CopilotChat() {
)}
+ {(pending.length > 0 || attachError) && (
+
+ {pending.map((a, i) => (
+
+ {a.kind === "image" ? : }
+ {a.name}
+
+
+ ))}
+ {attachError && {attachError}}
+
+ )}
+
diff --git a/src/components/dashboard/dashboard-mobile-nav.tsx b/src/components/dashboard/dashboard-mobile-nav.tsx
new file mode 100644
index 0000000..8b2ac8c
--- /dev/null
+++ b/src/components/dashboard/dashboard-mobile-nav.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { NAV_ITEMS } from "@/components/dashboard/dashboard-sidebar";
+import { cn } from "@/lib/utils";
+
+/**
+ * Mobile dashboard navigation. The sidebar is desktop-only (hidden below
+ * `lg`), which previously left phones with NO dashboard navigation at all —
+ * this horizontally-scrollable rail under the topbar fills that gap.
+ */
+export function DashboardMobileNav({ inboxUnread = 0 }: { inboxUnread?: number }) {
+ const pathname = usePathname();
+
+ return (
+
+ );
+}
diff --git a/src/components/dashboard/dashboard-sidebar.tsx b/src/components/dashboard/dashboard-sidebar.tsx
index fff1c4d..902f19e 100644
--- a/src/components/dashboard/dashboard-sidebar.tsx
+++ b/src/components/dashboard/dashboard-sidebar.tsx
@@ -13,6 +13,7 @@ import {
Settings,
ArrowLeft,
Sparkles,
+ Rocket,
} from "lucide-react";
import { Logo } from "@/components/shared/logo";
import { cn } from "@/lib/utils";
@@ -29,7 +30,7 @@ import { cn } from "@/lib/utils";
* the dashboard is an operator surface, not a marketing page.
*/
-const NAV_ITEMS = [
+export const NAV_ITEMS = [
{ href: "/dashboard", label: "Overview", icon: LayoutDashboard },
{ href: "/dashboard/inbox", label: "Inbox", icon: Inbox },
{ href: "/dashboard/projects", label: "Projects", icon: FolderKanban },
@@ -37,6 +38,7 @@ const NAV_ITEMS = [
{ href: "/dashboard/analytics", label: "Analytics", icon: BarChart3 },
{ href: "/dashboard/notifications", label: "Alerts", icon: Bell },
{ href: "/dashboard/copilot", label: "AI Copilot", icon: Sparkles },
+ { href: "/dashboard/gcode", label: "GCODE", icon: Rocket },
] as const;
export function DashboardSidebar({ inboxUnread = 0 }: { inboxUnread?: number }) {
diff --git a/src/components/dashboard/gcode/gcode-studio.tsx b/src/components/dashboard/gcode/gcode-studio.tsx
new file mode 100644
index 0000000..d74001a
--- /dev/null
+++ b/src/components/dashboard/gcode/gcode-studio.tsx
@@ -0,0 +1,238 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Send, Loader2, Rocket, Wrench, FolderGit2, ExternalLink } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface Action {
+ tool: string;
+ label: string;
+}
+interface Msg {
+ role: "user" | "assistant";
+ content: string;
+ actions?: Action[];
+}
+
+const STARTERS = [
+ "A waitlist landing page with a hero and email signup",
+ "A personal portfolio site with project cards",
+ "A pricing page with three tiers",
+ "A simple blog with three sample posts",
+];
+
+/** Render assistant text with clickable links — the PR/preview URL IS the product. */
+function Linkified({ text }: { text: string }) {
+ const parts = text.split(/(https?:\/\/[^\s)]+)/g);
+ return (
+ <>
+ {parts.map((part, i) =>
+ /^https?:\/\//.test(part) ? (
+
+ {part.replace(/^https:\/\/(www\.)?/, "").slice(0, 60)}
+
+
+ ) : (
+
{part}
+ ),
+ )}
+
+ );
+}
+
+/**
+ * GCODE — the app-builder studio. Pick a repo, describe the app; GCODE writes
+ * the code, opens the PR, and the PR grows a live preview URL. A focused
+ * builder-mode persona of the copilot chat API.
+ */
+export function GcodeStudio() {
+ const [messages, setMessages] = useState
([]);
+ const [input, setInput] = useState("");
+ const [busy, setBusy] = useState(false);
+ const [repos, setRepos] = useState([]);
+ const [repo, setRepo] = useState("");
+ const [repoError, setRepoError] = useState(null);
+ const scrollRef = useRef(null);
+
+ useEffect(() => {
+ scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
+ }, [messages, busy]);
+
+ useEffect(() => {
+ let cancelled = false;
+ (async () => {
+ try {
+ const res = await fetch("/api/github/repos", { cache: "no-store" });
+ const json = await res.json().catch(() => null);
+ if (cancelled) return;
+ if (res.ok && json?.ok) {
+ const names = (json.data.repos as { repo: string }[]).map((r) => r.repo);
+ setRepos(names);
+ if (names.length && !repo) setRepo(names[0]);
+ } else {
+ setRepoError(json?.error?.message ?? "Couldn't list your repos.");
+ }
+ } catch {
+ if (!cancelled) setRepoError("Couldn't list your repos.");
+ }
+ })();
+ return () => {
+ cancelled = true;
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ async function send(text: string) {
+ const content = text.trim();
+ if (!content || busy) return;
+ const history: Msg[] = [...messages, { role: "user", content }];
+ setMessages(history);
+ setInput("");
+ setBusy(true);
+ try {
+ const res = await fetch("/api/copilot/chat", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ messages: history.map((m) => ({ role: m.role, content: m.content })),
+ mode: "builder",
+ ...(repo ? { repo } : {}),
+ }),
+ });
+ const json = await res.json().catch(() => null);
+ if (!res.ok || !json?.ok) {
+ setMessages((m) => [...m, { role: "assistant", content: json?.error?.message ?? "Something went wrong." }]);
+ } else {
+ setMessages((m) => [...m, { role: "assistant", content: json.data.text, actions: json.data.actions }]);
+ }
+ } catch {
+ setMessages((m) => [...m, { role: "assistant", content: "Network error. Try again." }]);
+ }
+ setBusy(false);
+ }
+
+ const uniqueLabels = (actions?: Action[]) =>
+ actions?.length ? Array.from(new Set(actions.map((a) => a.label))) : [];
+
+ return (
+
+ {/* Build target */}
+
+
+ Build into
+
+ {repoError && {repoError}}
+
+
+
+ {messages.length === 0 && !busy ? (
+
+
+
+
+ Welcome to GCODE
+
+
+ Describe the app. GCODE writes the code, opens the pull request, and hands you a live
+ preview — built straight into your GitHub repo.
+
+
Try one:
+
+ {STARTERS.map((sx) => (
+
+ ))}
+
+
+
+ ) : (
+ <>
+ {messages.map((m, i) => {
+ const labels = uniqueLabels(m.actions);
+ return (
+
+
+
+ {m.role === "assistant" ? : m.content}
+
+ {labels.length > 0 && (
+
+
+ {labels.map((l, j) => (
+
+ {l}
+ {j < labels.length - 1 ? " ·" : ""}
+
+ ))}
+
+ )}
+
+
+ );
+ })}
+ {busy && (
+
+
+ GCODE is building — writing files, pushing,
+ opening the PR…
+
+
+ )}
+
+ )}
+
+
+
+
+
+
Live repo activity
+
+
+ Link this project to a GitHub repo to track commits, pull requests, and issues live.
+
+ {linkForm}
+
+ );
+ }
+
+ return (
+
+
+
+
Live repo activity
+
+ {repo}
+
+
+
+
edit code
+
+
+ {loading ? (
+
+ ) : (
+
+ )}
+ {fetchedAt ? `updated ${relativeTime(fetchedAt)}` : "connecting…"}
+
+
{linkForm}
}
+
+ {error ? (
+ {error}
+ ) : !activity ? (
+ Reading {repo}…
+ ) : (
+ <>
+
+
+ last push {activity.pushedAt ? relativeTime(activity.pushedAt) : "—"} · {activity.defaultBranch}
+
+
+ {activity.pullRequests.length} open PR
+ {activity.pullRequests.length === 1 ? "" : "s"}
+
+
+ {activity.issues.length} open issue
+ {activity.issues.length === 1 ? "" : "s"}
+
+
+ {activity.stars}
+
+
+
+
+
+
Recent commits
+ {activity.commits.length === 0 ? (
+
No commits yet.
+ ) : (
+
+ {activity.commits.slice(0, 6).map((c) => (
+ -
+
+
+ {c.message}
+
+
+ {c.date ? relativeTime(c.date) : c.sha}
+
+
+ ))}
+
+ )}
+
+
+
+
+
Open pull requests
+ {activity.pullRequests.length === 0 ? (
+
None open.
+ ) : (
+
+ )}
+
+
+ {activity.deployments.length > 0 && (
+
+
Deployments
+
+ {activity.deployments.slice(0, 3).map((d, i) => (
+ -
+
+ {d.environment}
+ {d.state}
+ {d.url && (
+
+ open
+
+ )}
+
+ {relativeTime(d.createdAt)}
+
+
+ ))}
+
+
+ )}
+
+
+
Open issues
+ {activity.issues.length === 0 ? (
+
None open.
+ ) : (
+
+ {activity.issues.slice(0, 4).map((i) => (
+ -
+ #{i.number}
+
+ {i.title}
+
+
+ {relativeTime(i.updatedAt)}
+
+
+ ))}
+
+ )}
+
+
+