@agent-native/core 0.79.17 → 0.79.19

package/corpus/templates/forms/app/global.css

@@ -93,55 +93,39 @@
   background: hsl(var(--muted-foreground) / 0.4);
 }
 
-.forms-home-page::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background-image:
-    linear-gradient(hsl(var(--border) / 0.24) 1px, transparent 1px),
-    linear-gradient(90deg, hsl(var(--border) / 0.18) 1px, transparent 1px);
-  background-size: 46px 46px;
-  mask-image: linear-gradient(
-    to bottom,
-    transparent,
-    black 14%,
-    black 78%,
-    transparent
-  );
-}
-
-.forms-home-chat-panel {
+.forms-ask-chat-panel {
   width: 100%;
 }
 
-.forms-home-chat-panel [data-agent-empty-state="centered"] {
+.forms-ask-chat-panel [data-agent-empty-state="centered"] {
   justify-content: center;
   padding-bottom: clamp(4rem, 12vh, 8rem);
 }
 
-.forms-home-chat-panel [data-agent-empty-state="centered"] .agent-chat-scroll {
+.forms-ask-chat-panel [data-agent-empty-state="centered"] .agent-chat-scroll {
   flex: 0 0 auto;
   min-height: 0;
   overflow: visible;
 }
 
-.forms-home-chat-panel .agent-composer-area--hero {
+.forms-ask-chat-panel .agent-composer-area--hero {
   padding-inline: 0;
   filter: none;
 }
 
-.forms-home-chat-panel
+.forms-ask-chat-panel
   [data-agent-empty-state="centered"]
   .agent-composer-area--hero {
   width: 100%;
 }
 
-.forms-home-chat-panel .agent-composer-root--hero {
+.forms-ask-chat-panel .agent-composer-root--hero {
   border-radius: 1.25rem;
+  background: hsl(var(--background));
   box-shadow: none;
 }
 
-.forms-home-chat-panel .agent-composer-root--hero:focus-within {
+.forms-ask-chat-panel .agent-composer-root--hero:focus-within {
   border-color: hsl(var(--ring) / 0.9);
   box-shadow: none;
 }
@@ -150,7 +134,7 @@
   display: none;
 }
 
-.forms-home-chat-panel [data-agent-empty-state="centered"] .forms-chat-intro {
+.forms-ask-chat-panel [data-agent-empty-state="centered"] .forms-chat-intro {
   display: grid;
   justify-items: center;
   gap: 0.75rem;

package/corpus/templates/forms/app/hooks/use-navigation-state.ts

@@ -84,8 +84,8 @@ export function useNavigationState() {
     getNavigationState: ({ pathname, searchParams }) => {
       const state: NavigationState = { view: "forms" };
 
-      if (pathname === "/") {
-        state.view = "home";
+      if (pathname === "/" || pathname === "/ask") {
+        state.view = "ask";
       } else if (pathname.startsWith("/forms")) {
         const formMatch = pathname.match(/\/forms\/([^/]+)/);
         if (formMatch) {
@@ -109,7 +109,7 @@ export function useNavigationState() {
       } else if (pathname.startsWith("/f/")) {
         state.view = "public-form";
       } else if (pathname.startsWith("/team")) {
-        state.view = "team";
+        state.view = "settings";
       } else if (pathname.startsWith("/extensions")) {
         state.view = "extensions";
       } else if (pathname.startsWith("/form-preview")) {
@@ -132,7 +132,7 @@ export function useNavigationState() {
     navigateOptions: { flushSync: true, replace: true },
     onNavigate: (_command, path) => {
       void prewarmFormsRoutePath(path);
-      if (location.pathname === "/" && path !== "/") {
+      if (location.pathname === "/ask" && path !== "/ask") {
         markAgentChatHomeHandoff("forms");
       }
     },

package/corpus/templates/forms/app/i18n/ar-SA.ts

@@ -17,6 +17,7 @@ const messages = {
     settings: "الإعدادات",
     brand: "النماذج",
     askForms: "اسأل Forms",
+    allForms: "كل النماذج",
     team: "الفريق",
   },
   settings: {

package/corpus/templates/forms/app/i18n/de-DE.ts

@@ -17,6 +17,7 @@ const messages = {
     settings: "Einstellungen",
     brand: "Formulare",
     askForms: "Fragen Sie nach Formularen",
+    allForms: "Alle Formulare",
     team: "Team",
   },
   settings: {

package/corpus/templates/forms/app/i18n/en-US.ts

@@ -17,6 +17,7 @@ const messages = {
     settings: "Settings",
     brand: "Forms",
     askForms: "Ask Forms",
+    allForms: "All forms",
     team: "Team",
   },
   settings: {

package/corpus/templates/forms/app/i18n/es-ES.ts

@@ -17,6 +17,7 @@ const messages = {
     settings: "Ajustes",
     brand: "Formularios",
     askForms: "Preguntar a Forms",
+    allForms: "Todos los formularios",
     team: "Equipo",
   },
   settings: {

package/corpus/templates/forms/app/i18n/fr-FR.ts

@@ -17,6 +17,7 @@ const messages = {
     settings: "Paramètres",
     brand: "Formulaires",
     askForms: "Demander a Forms",
+    allForms: "Tous les formulaires",
     team: "Equipe",
   },
   settings: {

package/corpus/templates/forms/app/i18n/hi-IN.ts

@@ -17,6 +17,7 @@ const messages = {
     settings: "सेटिंग्स",
     brand: "फॉर्म",
     askForms: "प्रपत्र पूछें",
+    allForms: "सभी फॉर्म",
     team: "टीम",
   },
   settings: {

package/corpus/templates/forms/app/i18n/ja-JP.ts

@@ -17,6 +17,7 @@ const messages = {
     settings: "設定",
     brand: "フォーム",
     askForms: "フォームに質問する",
+    allForms: "すべてのフォーム",
     team: "チーム",
   },
   settings: {

package/corpus/templates/forms/app/i18n/ko-KR.ts

@@ -17,6 +17,7 @@ const messages = {
     settings: "설정",
     brand: "양식",
     askForms: "양식에 문의하기",
+    allForms: "모든 양식",
     team: "팀",
   },
   settings: {

package/corpus/templates/forms/app/i18n/pt-BR.ts

@@ -17,6 +17,7 @@ const messages = {
     settings: "Configurações",
     brand: "Formularios",
     askForms: "Perguntar ao Forms",
+    allForms: "Todos os formulários",
     team: "Equipe",
   },
   settings: {

package/corpus/templates/forms/app/i18n/zh-CN.ts

@@ -17,6 +17,7 @@ const messages = {
     settings: "设置",
     brand: "表单",
     askForms: "询问表单",
+    allForms: "所有表单",
     team: "团队",
   },
   settings: {

package/corpus/templates/forms/app/i18n/zh-TW.ts

@@ -17,6 +17,7 @@ const messages = {
     settings: "設定",
     brand: "表單",
     askForms: "詢問表單",
+    allForms: "所有表單",
     team: "團隊",
   },
   settings: {

package/corpus/templates/forms/app/lib/route-prewarm.ts

@@ -23,7 +23,14 @@ export function prewarmFormsRoutePath(path: string) {
   const pathname = parsePath(path);
   const jobs: Promise<unknown>[] = [];
 
-  if (pathname === "/" || pathname === "/forms") {
+  if (pathname === "/" || pathname === "/ask") {
+    jobs.push(
+      prewarm("layout", () => import("@/routes/_app")),
+      prewarm("ask", () => import("@/routes/_app.ask")),
+    );
+  }
+
+  if (pathname === "/forms") {
     jobs.push(
       prewarm("layout", () => import("@/routes/_app")),
       prewarm("forms-index", () => import("@/routes/_app.forms._index")),
@@ -52,13 +59,6 @@ export function prewarmFormsRoutePath(path: string) {
     );
   }
 
-  if (pathname === "/team") {
-    jobs.push(
-      prewarm("layout", () => import("@/routes/_app")),
-      prewarm("team", () => import("@/routes/_app.team")),
-    );
-  }
-
   if (pathname.startsWith("/extensions")) {
     jobs.push(
       prewarm("layout", () => import("@/routes/_app")),
@@ -86,6 +86,7 @@ export function prewarmFormsRoutePath(path: string) {
 
 export function prewarmCommonFormsRoutes() {
   return Promise.all([
+    prewarmFormsRoutePath("/ask"),
     prewarmFormsRoutePath("/forms"),
     prewarmFormsRoutePath("/forms/__route_prewarm__?tab=edit"),
     prewarmFormsRoutePath("/forms/__route_prewarm__/responses"),

package/corpus/templates/forms/app/pages/AskPage.tsx

@@ -0,0 +1,70 @@
+import {
+  AgentChatSurface,
+  markAgentChatHomeHandoff,
+  useT,
+} from "@agent-native/core/client";
+import { IconChartBar, IconDatabase, IconSettings } from "@tabler/icons-react";
+import { useEffect } from "react";
+
+import { scheduleFormsRoutePrewarm } from "@/lib/route-prewarm";
+import { TAB_ID } from "@/lib/tab-id";
+
+export function AskPage() {
+  const t = useT();
+
+  useEffect(() => {
+    function handleChatRunning(event: Event) {
+      const detail = (event as CustomEvent).detail;
+      if (detail?.isRunning === true) markAgentChatHomeHandoff("forms");
+    }
+
+    const cancelRoutePrewarm = scheduleFormsRoutePrewarm();
+    window.addEventListener("agentNative.chatRunning", handleChatRunning);
+    return () => {
+      cancelRoutePrewarm();
+      window.removeEventListener("agentNative.chatRunning", handleChatRunning);
+    };
+  }, []);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background">
+      <AgentChatSurface
+        mode="page"
+        chatViewTransition
+        className="forms-ask-chat-panel bg-background shadow-none"
+        defaultMode="chat"
+        storageKey="forms"
+        browserTabId={TAB_ID}
+        showHeader={false}
+        showTabBar={false}
+        dynamicSuggestions={false}
+        suggestions={[]}
+        emptyStateText={t("home.emptyState")}
+        emptyStateDisplay="hidden"
+        centerComposerWhenEmpty
+        composerLayoutVariant="hero"
+        composerPlaceholder={t("home.composerPlaceholder")}
+        composerSlot={
+          <div className="forms-chat-intro">
+            <h1>{t("home.heading")}</h1>
+            <p>{t("home.description")}</p>
+            <div className="forms-chat-pill-row" aria-hidden="true">
+              <span>
+                <IconDatabase className="size-3.5" />
+                {t("home.pillForms")}
+              </span>
+              <span>
+                <IconChartBar className="size-3.5" />
+                {t("home.pillAnalytics")}
+              </span>
+              <span>
+                <IconSettings className="size-3.5" />
+                {t("home.pillConfiguration")}
+              </span>
+            </div>
+          </div>
+        }
+      />
+    </div>
+  );
+}

package/corpus/templates/forms/app/pages/FormsListPage.tsx

@@ -269,26 +269,19 @@ export function FormsListPage() {
   if (isLoading) {
     return (
       <div className="p-3 sm:p-6 max-w-5xl mx-auto">
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <div className="overflow-hidden rounded-lg border border-border bg-card">
           {Array.from({ length: 6 }).map((_, i) => (
             <div
               key={i}
-              className="border border-border rounded-xl p-4 sm:p-5 bg-card"
+              className="grid gap-3 border-b border-border px-3 py-3 last:border-b-0 md:grid-cols-[minmax(0,1fr)_120px_120px_80px]"
             >
-              <div className="flex items-start justify-between mb-3 gap-2">
-                <div className="flex-1 min-w-0 space-y-2">
-                  <Skeleton className="h-4 w-3/4" />
-                  <Skeleton className="h-3 w-1/2" />
-                </div>
-                <Skeleton className="h-8 w-8 rounded-md shrink-0" />
-              </div>
-              <div className="flex items-center justify-between gap-2">
-                <Skeleton className="h-4 w-14 rounded-full" />
-                <div className="flex items-center gap-3">
-                  <Skeleton className="h-3 w-16" />
-                  <Skeleton className="h-3 w-10" />
-                </div>
+              <div className="min-w-0 space-y-2">
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-3 w-1/2" />
               </div>
+              <Skeleton className="h-5 w-20 rounded-full" />
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-8 w-8 rounded-md md:ms-auto" />
             </div>
           ))}
         </div>
@@ -446,20 +439,32 @@ export function FormsListPage() {
           )}
         </div>
       ) : (
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <div className="overflow-hidden rounded-lg border border-border bg-card">
           {forms.map((form: any) => {
             const selected = selectedIds.has(form.id);
+            const dateLabel =
+              isArchive && (form as any).deletedAt
+                ? t("forms.deletedDate", {
+                    date: formatDate((form as any).deletedAt, {
+                      month: "short",
+                      day: "numeric",
+                    }),
+                  })
+                : formatDate(form.createdAt, {
+                    month: "short",
+                    day: "numeric",
+                  });
 
             return (
               <div
                 key={form.id}
                 className={cn(
-                  "group relative border border-border rounded-xl p-4 sm:p-5 cursor-pointer bg-card",
+                  "group grid cursor-pointer gap-3 border-b border-border px-3 py-3 last:border-b-0 md:grid-cols-[minmax(0,1fr)_110px_140px_88px_40px] md:items-center",
                   isArchive
-                    ? "opacity-80 hover:opacity-100 hover:border-border"
-                    : "hover:border-primary/30",
-                  selectionMode && "hover:border-primary/40 hover:bg-accent/20",
-                  selected && "border-primary/60 ring-1 ring-primary/20",
+                    ? "opacity-80 hover:opacity-100 hover:bg-accent/25"
+                    : "hover:bg-accent/25",
+                  selectionMode && "hover:bg-accent/30",
+                  selected && "bg-accent/35 ring-1 ring-inset ring-primary/20",
                 )}
                 role="button"
                 tabIndex={0}
@@ -493,36 +498,57 @@ export function FormsListPage() {
                   }
                 }}
               >
-                <div className="flex items-start justify-between gap-2 mb-3 min-w-0">
-                  <div className="flex flex-1 items-start gap-2 min-w-0">
-                    {selectionMode && (
-                      <Checkbox
-                        checked={selected}
-                        onCheckedChange={() => toggleSelection(form.id)}
-                        onClick={(e) => e.stopPropagation()}
-                        aria-label={t("forms.selectForm", {
-                          title: form.title,
-                        })}
-                        className="mt-0.5 shrink-0"
+                <div className="flex min-w-0 items-start gap-2.5">
+                  {selectionMode && (
+                    <Checkbox
+                      checked={selected}
+                      onCheckedChange={() => toggleSelection(form.id)}
+                      onClick={(e) => e.stopPropagation()}
+                      aria-label={t("forms.selectForm", {
+                        title: form.title,
+                      })}
+                      className="mt-0.5 shrink-0"
+                    />
+                  )}
+                  <div className="min-w-0 flex-1">
+                    <div className="flex min-w-0 items-center gap-2">
+                      <h3 className="min-w-0 flex-1 truncate text-sm font-medium">
+                        {form.title}
+                      </h3>
+                      <VisibilityBadge
+                        visibility={(form as any).visibility}
+                        className="shrink-0"
                       />
-                    )}
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2 min-w-0">
-                        <h3 className="font-medium truncate flex-1 min-w-0">
-                          {form.title}
-                        </h3>
-                        <VisibilityBadge
-                          visibility={(form as any).visibility}
-                          className="shrink-0"
-                        />
-                      </div>
-                      {form.description && (
-                        <p className="text-xs text-muted-foreground mt-0.5 truncate">
-                          {form.description}
-                        </p>
-                      )}
                     </div>
+                    {form.description && (
+                      <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                        {form.description}
+                      </p>
+                    )}
                   </div>
+                </div>
+
+                <div className="flex items-center md:justify-start">
+                  <Badge
+                    variant="outline"
+                    className={cn("text-[10px]", statusColors[form.status])}
+                  >
+                    {form.status}
+                  </Badge>
+                </div>
+
+                <div className="min-w-0 text-xs text-muted-foreground">
+                  {t("responses.totalCount", {
+                    count: form.responseCount ?? 0,
+                    formattedCount: formatNumber(form.responseCount ?? 0),
+                  })}
+                </div>
+
+                <div className="min-w-0 text-xs text-muted-foreground">
+                  {dateLabel}
+                </div>
+
+                <div className="flex justify-end">
                   {!selectionMode && (
                     <DropdownMenu>
                       <DropdownMenuTrigger
@@ -649,39 +675,6 @@ export function FormsListPage() {
                     </DropdownMenu>
                   )}
                 </div>
-
-                <div className="flex flex-wrap items-center justify-between gap-2">
-                  <Badge
-                    variant="outline"
-                    className={cn(
-                      "text-[10px] shrink-0",
-                      statusColors[form.status],
-                    )}
-                  >
-                    {form.status}
-                  </Badge>
-                  <div className="flex min-w-0 flex-wrap items-center justify-end gap-x-3 gap-y-1 text-xs text-muted-foreground">
-                    <span className="block min-w-0 max-w-full truncate">
-                      {t("responses.totalCount", {
-                        count: form.responseCount ?? 0,
-                        formattedCount: formatNumber(form.responseCount ?? 0),
-                      })}
-                    </span>
-                    <span className="block min-w-0 max-w-full truncate">
-                      {isArchive && (form as any).deletedAt
-                        ? t("forms.deletedDate", {
-                            date: formatDate((form as any).deletedAt, {
-                              month: "short",
-                              day: "numeric",
-                            }),
-                          })
-                        : formatDate(form.createdAt, {
-                            month: "short",
-                            day: "numeric",
-                          })}
-                    </span>
-                  </div>
-                </div>
               </div>
             );
           })}

package/corpus/templates/forms/app/root.tsx

@@ -198,7 +198,7 @@ function OpenLinkInterceptor() {
       if (!path) return;
 
       event.preventDefault();
-      if (location.pathname === "/" && path !== "/") {
+      if (location.pathname === "/ask" && path !== "/ask") {
         markAgentChatHomeHandoff("forms");
       }
       navigateWithAgentChatViewTransition(navigate, path);

package/corpus/templates/forms/app/routes/_app.ask.tsx

@@ -0,0 +1,14 @@
+import messages from "@/i18n/en-US";
+import { AskPage } from "@/pages/AskPage";
+
+export function meta() {
+  return [
+    {
+      title: `${messages.navigation.askForms} - ${messages.navigation.brand}`,
+    },
+  ];
+}
+
+export default function AskRoute() {
+  return <AskPage />;
+}