madarx 2.16.0 → 2.16.2

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to Madarx OS. Newest first.
 
+## [2.16.2] - 2026-06-05
+
+### Changed
+
+- **Login brand motion polish.** Added the animated madarX orbit/mark lockup to the login hero, including reduced-motion fallbacks and mobile sizing, so the app entrance matches the public madarX brand language.
+
+## [2.16.1] - 2026-06-05
+
+### Added
+
+- **Shared brand publishing groundwork.** Added a brand sharing API path, local ledger/schema support, Supabase migration scaffolding, cloud mapping/validation helpers, and tests for publishing/adopting brand profiles without leaking secrets.
+- **Custom brand logos in release-note artifacts.** Release notes now use the inline madarX mark for the default profile and switch to a user-uploaded logo when a custom brand is configured, covered by artifact-format tests.
+- **Marketplace and agent tool-category UX spec.** Captured the next presentation-layer pass for friendly tool collections, complete icon coverage, and non-technical Details affordances.
+
+### Changed
+
+- **Login, chat, sidebar, and brand surfaces refreshed.** Updated the login experience, chat prompt controls, sidebar avatar treatment, brand page controls, and shared UI primitives so the new sharing/tool UX can land cleanly.
+
 ## [2.16.0] - 2026-06-05
 
 ### Added

package/app/api/brand/share/route.js

@@ -0,0 +1,147 @@
+// /api/brand/share — share the local brand profile with the org, or adopt the
+// org's shared brand locally.
+//
+//   GET                      → local share status + capabilities (+ org brand peek)
+//   POST { action:'publish'  } → owner/admin: publish local brand to the org cloud row
+//   POST { action:'unpublish'} → owner/admin: stop sharing (delete cloud row)
+//   POST { action:'adopt'    } → member+: pull the org brand into local config
+//
+// Local-first: the brand stays in local SQLite by default. Publishing/adopting
+// are explicit, audited actions routed through lib/shared-cloud.js, which holds
+// the service-role key server-side and never ships it to the browser.
+
+import { getBrandProfile, saveBrandProfile } from '@/lib/brand.js';
+import {
+  isSharedCloudReady,
+  isSharedCloudUserReady,
+  getBrandPublishStatus,
+  publishBrandProfile,
+  unpublishBrandProfile,
+  fetchOrgBrandProfile,
+  markBrandAdopted,
+} from '@/lib/shared-cloud.js';
+import { requireSession, requireFreshMembership } from '@/lib/auth.js';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+function requireManager(session) {
+  if (!['owner', 'admin'].includes(session.role)) {
+    throw { status: 403, error: 'forbidden' };
+  }
+}
+
+function cloudReady() {
+  return isSharedCloudReady() || isSharedCloudUserReady();
+}
+
+export async function GET(req) {
+  try {
+    const session = await requireSession(req);
+    if (!session.org_id) {
+      return Response.json({ ok: true, status: { status: 'local', published: false }, can_manage: false, shared_cloud_ready: false, needs_org: true });
+    }
+
+    const ready = cloudReady();
+    const status = getBrandPublishStatus(session.org_id);
+    const canManage = ['owner', 'admin'].includes(session.role);
+
+    // Peek whether an org brand exists so the UI can offer "Adopt". Best-effort:
+    // a network hiccup must never break the page, so failures degrade to null.
+    let orgBrand = null;
+    if (ready) {
+      try {
+        const fetched = await fetchOrgBrandProfile({ session, org_id: session.org_id });
+        if (fetched) {
+          orgBrand = {
+            company_name: fetched.company_name,
+            content_hash: fetched.content_hash,
+            updated_at: fetched.updated_at,
+            is_current: fetched.content_hash && fetched.content_hash === status.content_hash,
+          };
+        }
+      } catch {
+        orgBrand = null;
+      }
+    }
+
+    return Response.json({
+      ok: true,
+      status,
+      can_manage: canManage,
+      shared_cloud_ready: ready,
+      org_brand: orgBrand,
+    });
+  } catch (err) {
+    if (err && typeof err === 'object' && err.status) {
+      return Response.json({ ok: false, error: err.error || 'unauthorized' }, { status: err.status });
+    }
+    return Response.json({ ok: false, error: err?.message || 'server_error' }, { status: 500 });
+  }
+}
+
+export async function POST(req) {
+  let body;
+  try {
+    body = await req.json();
+  } catch {
+    return Response.json({ ok: false, error: 'invalid_json' }, { status: 400 });
+  }
+
+  try {
+    const session = await requireSession(req);
+    if (!session.org_id) {
+      return Response.json({ ok: false, error: 'org_required' }, { status: 400 });
+    }
+    await requireFreshMembership(session, session.org_id);
+
+    if (!cloudReady()) {
+      return Response.json({ ok: false, error: 'shared_cloud_not_configured' }, { status: 503 });
+    }
+
+    const action = String(body?.action || '');
+
+    if (action === 'publish') {
+      requireManager(session);
+      const profile = getBrandProfile();
+      const status = await publishBrandProfile({
+        session,
+        org_id: session.org_id,
+        profile,
+        published_by: session.user_id,
+      });
+      return Response.json({ ok: true, status });
+    }
+
+    if (action === 'unpublish') {
+      requireManager(session);
+      const status = await unpublishBrandProfile({ session, org_id: session.org_id });
+      return Response.json({ ok: true, status });
+    }
+
+    if (action === 'adopt') {
+      const fetched = await fetchOrgBrandProfile({ session, org_id: session.org_id });
+      if (!fetched || !fetched.profile) {
+        return Response.json({ ok: false, error: 'no_org_brand' }, { status: 404 });
+      }
+      // Adopt = make the org brand this install's local default. The org's logo
+      // data URL rides inside profile_json, so saving the profile is enough.
+      const saved = saveBrandProfile({ ...fetched.profile, active: true });
+      const status = markBrandAdopted(session.org_id, {
+        content_hash: fetched.content_hash,
+        user_id: session.user_id,
+      });
+      return Response.json({ ok: true, status, brand: saved });
+    }
+
+    return Response.json({ ok: false, error: 'invalid_action' }, { status: 400 });
+  } catch (err) {
+    if (err && typeof err === 'object' && err.status) {
+      return Response.json({ ok: false, error: err.error || 'unauthorized' }, { status: err.status });
+    }
+    if (/required|not configured|not found/i.test(String(err?.message || ''))) {
+      return Response.json({ ok: false, error: err.message }, { status: 400 });
+    }
+    return Response.json({ ok: false, error: err?.message || 'server_error' }, { status: 500 });
+  }
+}

package/app/brand/page.js

@@ -17,12 +17,98 @@ function colorText(colors) {
   return (colors || []).map(c => `${c.name || 'Color'}: ${c.value}`).join('\n');
 }
 
+function syncedLabel(iso) {
+  if (!iso) return '';
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return '';
+  return d.toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+}
+
+// Team-sharing panel. Local-first by default; an owner/admin can publish the
+// brand to the org and any member can adopt the shared org brand locally.
+function ShareCard({ share, sharing, onShare }) {
+  const ready = share?.shared_cloud_ready;
+  const status = share?.status || {};
+  const canManage = Boolean(share?.can_manage);
+  const orgBrand = share?.org_brand || null;
+  const busy = Boolean(sharing);
+
+  const state = !ready ? 'Local only'
+    : status.source === 'org' || status.status === 'adopted' ? 'Using team brand'
+      : status.published ? 'Shared with team'
+        : 'Saved locally';
+
+  return (
+    <section className="brand-panel brand-share-panel">
+      <div className="brand-panel-head">
+        <span>Team Sharing</span>
+        <small>{ready ? 'Save locally, or share one brand across your org' : 'Supabase not configured'}</small>
+      </div>
+
+      <div className="brand-share-state">
+        <span className={`brand-share-chip ${status.published ? 'on' : status.source === 'org' ? 'org' : ''}`}>{state}</span>
+        {ready && status.published && status.last_synced_at && (
+          <small>Synced {syncedLabel(status.last_synced_at)}</small>
+        )}
+        {ready && status.source === 'org' && status.adopted_at && (
+          <small>Adopted {syncedLabel(status.adopted_at)}</small>
+        )}
+      </div>
+
+      {!ready ? (
+        <p className="brand-share-hint">
+          Your brand is stored locally on this machine. To share one brand across your team,
+          configure Supabase (SUPABASE_URL + service-role key) and create an organization.
+        </p>
+      ) : (
+        <>
+          {share?.needs_org && (
+            <p className="brand-share-hint">Join or create an organization to share your brand with a team.</p>
+          )}
+
+          {orgBrand && !orgBrand.is_current && (
+            <div className="brand-share-row">
+              <div>
+                <b>Team brand available</b>
+                <small>{orgBrand.company_name}{orgBrand.updated_at ? ` · updated ${syncedLabel(orgBrand.updated_at)}` : ''}</small>
+              </div>
+              <button type="button" className="admin-button" disabled={busy} onClick={() => onShare('adopt')}>
+                {sharing === 'adopt' ? 'Adopting…' : 'Adopt team brand'}
+              </button>
+            </div>
+          )}
+          {orgBrand && orgBrand.is_current && (
+            <p className="brand-share-hint">This workspace matches the team brand.</p>
+          )}
+
+          {canManage ? (
+            <div className="brand-share-actions">
+              <button type="button" className="admin-button mars" disabled={busy} onClick={() => onShare('publish')}>
+                {sharing === 'publish' ? 'Sharing…' : status.published ? 'Update shared brand' : 'Share with team'}
+              </button>
+              {status.published && (
+                <button type="button" className="admin-button" disabled={busy} onClick={() => onShare('unpublish')}>
+                  {sharing === 'unpublish' ? 'Stopping…' : 'Stop sharing'}
+                </button>
+              )}
+            </div>
+          ) : (
+            <p className="brand-share-hint">Only org owners and admins can publish the team brand.</p>
+          )}
+        </>
+      )}
+    </section>
+  );
+}
+
 export default function BrandPage() {
   const [brand, setBrand] = useState(null);
   const [draft, setDraft] = useState(null);
   const [saving, setSaving] = useState(false);
   const [uploading, setUploading] = useState(null);
   const [notice, setNotice] = useState(null);
+  const [share, setShare] = useState(null);
+  const [sharing, setSharing] = useState(null);
 
   async function refresh() {
     const data = await api('/api/brand');
@@ -36,8 +122,19 @@ export default function BrandPage() {
     });
   }
 
+  async function refreshShare() {
+    try {
+      const data = await api('/api/brand/share');
+      setShare(data);
+    } catch {
+      // Sharing is optional surface; never block the editor on it.
+      setShare({ ok: false, shared_cloud_ready: false });
+    }
+  }
+
   useEffect(() => {
     refresh().catch(err => setNotice({ type: 'error', text: err.message }));
+    refreshShare();
   }, []);
 
   useEffect(() => {
@@ -118,6 +215,38 @@ export default function BrandPage() {
     }
   }
 
+  async function doShare(action) {
+    setSharing(action);
+    setNotice(null);
+    try {
+      const data = await api('/api/brand/share', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ action }),
+      });
+      // Adopt replaces the local brand — re-pull the editor so it reflects the org brand.
+      if (action === 'adopt' && data.brand) {
+        setBrand(data.brand);
+        setDraft({
+          ...data.brand,
+          colors_text: colorText(data.brand.colors),
+          fonts_text: listText(data.brand.fonts),
+          voice_text: listText(data.brand.voice),
+          document_types_text: listText(data.brand.document_types),
+        });
+      }
+      await refreshShare();
+      const msg = action === 'publish' ? 'Brand shared with your team. Members can now adopt it.'
+        : action === 'unpublish' ? 'Stopped sharing. Your brand stays saved locally.'
+          : 'Adopted your team brand. It is now this workspace’s default.';
+      setNotice({ type: 'success', text: msg });
+    } catch (err) {
+      setNotice({ type: 'error', text: err.message });
+    } finally {
+      setSharing(null);
+    }
+  }
+
   if (!draft) {
     return (
       <AdminShell
@@ -205,6 +334,8 @@ export default function BrandPage() {
             </div>
           </section>
 
+          <ShareCard share={share} sharing={sharing} onShare={doShare} />
+
           <section className="brand-panel">
             <div className="brand-panel-head">
               <span>Identity</span>

package/app/components/dashboard/chat-panel.jsx

@@ -8,6 +8,17 @@ import { useDashboard } from './dashboard-context';
 import { useDraftPersist } from './use-draft-persist';
 
 const MAX_ATTACHMENTS = 8;
+const DEFAULT_COMPOSER_HEIGHT = 120;
+const MIN_COMPOSER_HEIGHT = 72;
+const COMPOSER_HEIGHT_KEY = 'madarx:composerHeight';
+
+function maxComposerHeight() {
+  if (typeof window === 'undefined') return 520;
+  return Math.max(160, Math.round(window.innerHeight * 0.72));
+}
+function clampComposerHeight(h) {
+  return Math.min(maxComposerHeight(), Math.max(MIN_COMPOSER_HEIGHT, Math.round(h)));
+}
 
 function formatBytes(n) {
   if (!n && n !== 0) return '';
@@ -65,6 +76,9 @@ function ChatPanel() {
   const [uploading, setUploading] = useState(false);
   const [uploadError, setUploadError] = useState(null);
   const [dragOver, setDragOver] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [composerHeight, setComposerHeight] = useState(DEFAULT_COMPOSER_HEIGHT);
+  const [resizing, setResizing] = useState(false);
 
   const uploadFiles = useCallback(async (fileList) => {
     const list = Array.from(fileList || []).filter(Boolean);
@@ -149,6 +163,47 @@ function ChatPanel() {
     uploadFiles(e.dataTransfer.files);
   }, [uploadFiles]);
 
+  useEffect(() => {
+    if (!fullscreen) return;
+    function onKey(e) { if (e.key === 'Escape') setFullscreen(false); }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [fullscreen]);
+
+  // Restore the user's preferred input height, then keep it persisted.
+  useEffect(() => {
+    try {
+      const saved = Number(localStorage.getItem(COMPOSER_HEIGHT_KEY));
+      if (saved >= MIN_COMPOSER_HEIGHT) setComposerHeight(clampComposerHeight(saved));
+    } catch {}
+  }, []);
+  useEffect(() => {
+    try { localStorage.setItem(COMPOSER_HEIGHT_KEY, String(composerHeight)); } catch {}
+  }, [composerHeight]);
+
+  // Drag the splitter to grow/shrink the input panel (dragging up = taller).
+  const onResizeStart = useCallback((e) => {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startH = composerHeight;
+    setResizing(true);
+    const onMove = (ev) => setComposerHeight(clampComposerHeight(startH + (startY - ev.clientY)));
+    const onUp = () => {
+      setResizing(false);
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+  }, [composerHeight]);
+
+  const onResizeKey = useCallback((e) => {
+    if (e.key === 'ArrowUp') { e.preventDefault(); setComposerHeight(h => clampComposerHeight(h + 24)); }
+    else if (e.key === 'ArrowDown') { e.preventDefault(); setComposerHeight(h => clampComposerHeight(h - 24)); }
+  }, []);
+
+  const resetComposerHeight = useCallback(() => setComposerHeight(DEFAULT_COMPOSER_HEIGHT), []);
+
   useEffect(() => {
     function focusComposer() {
       composerRef.current?.focus();
@@ -167,7 +222,7 @@ function ChatPanel() {
   }, [newSession]);
 
   return (
-<section className={'chat' + (dragOver ? ' chat--dragover' : '')}
+<div className={'chat-column' + (dragOver ? ' chat-column--dragover' : '') + (fullscreen ? ' chat-column--fullscreen' : '') + (resizing ? ' chat-column--resizing' : '')}
   onDragEnter={onDragEnter} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}>
   {dragOver && (
     <div className="chat-dropzone" aria-hidden="true">
@@ -180,6 +235,7 @@ function ChatPanel() {
       </div>
     </div>
   )}
+  <section className="chat">
   <div className="chat-top">
     <div className="model-pill-wrap">
       <button className="model-pill" onClick={() => setModelOpen(o => !o)} aria-haspopup="listbox" aria-expanded={modelOpen}
@@ -264,6 +320,24 @@ function ChatPanel() {
         </svg>
       </button>
     ) : null}
+    <button
+      className={'config-btn' + (fullscreen ? ' on' : '')}
+      style={{marginLeft:0}}
+      onClick={() => setFullscreen(f => !f)}
+      title={fullscreen ? 'Exit full screen' : 'Full screen'}
+      aria-label={fullscreen ? 'Exit full screen' : 'Full screen'}
+      aria-pressed={fullscreen}
+    >
+      {fullscreen ? (
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5"/>
+        </svg>
+      ) : (
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/>
+        </svg>
+      )}
+    </button>
     {hideChat ? (
       <button className="config-btn" style={{marginLeft:0}} onClick={hideChat} title="Minimize" aria-label="Minimize chat">
         <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
@@ -369,6 +443,22 @@ function ChatPanel() {
     )}
     {busy && liveSteps.length === 0 && <div className="typing-indicator"><span /><span /><span /></div>}
   </div>
+  </section>
+  <div
+    className="composer-resizer"
+    role="separator"
+    aria-orientation="horizontal"
+    aria-label="Resize the message input"
+    aria-valuenow={composerHeight}
+    tabIndex={0}
+    onPointerDown={onResizeStart}
+    onKeyDown={onResizeKey}
+    onDoubleClick={resetComposerHeight}
+    title="Drag to resize · double-click to reset"
+  >
+    <span className="composer-resizer-grip" aria-hidden="true" />
+  </div>
+  <section className="composer-panel" style={{ height: composerHeight }} aria-label="Message input">
   <form className="composer" onSubmit={e => { e.preventDefault(); send(); }}>
     <input
       ref={fileInputRef}
@@ -378,18 +468,6 @@ function ChatPanel() {
       accept="image/png,image/jpeg,image/gif,image/webp,application/pdf,text/*,.md,.markdown,.csv,.tsv,.json,.jsonl,.log,.yaml,.yml,.xml,.html,.css,.js,.jsx,.ts,.tsx,.mjs,.cjs,.py,.rb,.go,.rs,.java,.c,.h,.cpp,.cs,.php,.sh,.sql,.toml,.ini"
       onChange={e => { uploadFiles(e.target.files); e.target.value = ''; }}
     />
-    <button
-      type="button"
-      className="attach-btn"
-      onClick={() => fileInputRef.current?.click()}
-      disabled={busy}
-      title="Attach files"
-      aria-label="Attach files"
-    >
-      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M21.4 11.05 12.25 20.2a5.5 5.5 0 0 1-7.78-7.78l9.2-9.2a3.67 3.67 0 0 1 5.18 5.18l-9.2 9.19a1.83 1.83 0 0 1-2.59-2.59l8.49-8.48"/>
-      </svg>
-    </button>
     <div className="composer-field">
       {(attachments.length > 0 || uploading || uploadError) && (
         <div className="composer-attachments">
@@ -424,27 +502,42 @@ function ChatPanel() {
         rows={3}
       />
     </div>
-    {busy ? (
+    <div className="composer-actions">
       <button
         type="button"
-        className="send-btn send-btn--stop"
-        onClick={e => { e.preventDefault(); if (stop) stop(); }}
-        aria-label="Stop main agent"
-        title="Stop main agent"
+        className="attach-btn"
+        onClick={() => fileInputRef.current?.click()}
+        disabled={busy}
+        title="Attach files"
+        aria-label="Attach files"
       >
-        <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-          <rect x="5" y="5" width="8" height="8" rx="1.5" fill="currentColor" />
-        </svg>
-      </button>
-    ) : (
-      <button className="send-btn" disabled={(!prompt.trim() && attachments.length === 0) || uploading} aria-label="Send">
-        <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-          <path d="M9 14V4M9 4L4.5 8.5M9 4L13.5 8.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21.4 11.05 12.25 20.2a5.5 5.5 0 0 1-7.78-7.78l9.2-9.2a3.67 3.67 0 0 1 5.18 5.18l-9.2 9.19a1.83 1.83 0 0 1-2.59-2.59l8.49-8.48"/>
         </svg>
       </button>
-    )}
+      {busy ? (
+        <button
+          type="button"
+          className="send-btn send-btn--stop"
+          onClick={e => { e.preventDefault(); if (stop) stop(); }}
+          aria-label="Stop main agent"
+          title="Stop main agent"
+        >
+          <svg width="16" height="16" viewBox="0 0 18 18" fill="none">
+            <rect x="5" y="5" width="8" height="8" rx="1.5" fill="currentColor" />
+          </svg>
+        </button>
+      ) : (
+        <button className="send-btn" disabled={(!prompt.trim() && attachments.length === 0) || uploading} aria-label="Send">
+          <svg width="16" height="16" viewBox="0 0 18 18" fill="none">
+            <path d="M9 14V4M9 4L4.5 8.5M9 4L13.5 8.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        </button>
+      )}
+    </div>
   </form>
-</section>
+  </section>
+</div>
   );
 }
 

package/app/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/app/components/ui/prompt-input.tsx

@@ -0,0 +1 @@
+export {}