feat: mobile polish — 'Let's weave' branding, minimal chrome, clean composer

Author: BunsDev

app/page.tsx

@@ -505,35 +505,21 @@ export default function EditorLayout() {
             className="shrink-0 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--bg-elevated)_94%,black)] px-3 pb-3"
             style={{ paddingTop: 'calc(env(safe-area-inset-top) + 0.75rem)' }}
           >
-            <div className="flex items-start gap-2">
-              {showMobileSidebarButton ? (
-                <button
-                  type="button"
-                  onClick={() => setMobileSidebarOpen(true)}
-                  className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-[var(--border)] bg-[color-mix(in_srgb,var(--bg)_92%,transparent)] text-[var(--text-secondary)] transition hover:bg-[color-mix(in_srgb,var(--text-primary)_5%,transparent)] hover:text-[var(--text-primary)]"
-                  title="Open workspace"
-                >
-                  <Icon icon="lucide:panel-left-open" width={18} height={18} />
-                </button>
-              ) : (
-                <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-[var(--border)] bg-[color-mix(in_srgb,var(--bg)_92%,transparent)] text-[var(--brand)]">
-                  <Icon icon={activeViewMeta.icon} width={18} height={18} />
-                </div>
-              )}
-
-              <div className="min-w-0 flex-1 pt-0.5">
-                <div className="truncate text-[10px] font-medium uppercase tracking-[0.18em] text-[var(--text-disabled)]">
-                  {workspaceLabel}
-                </div>
-                <div className="mt-1 flex items-center gap-2">
-                  <span className="truncate text-[15px] font-semibold text-[var(--text-primary)]">
-                    {activeViewMeta.label}
+            <div className="flex items-center gap-2">
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="text-[15px] font-semibold text-[var(--text-primary)] tracking-tight">
+                    Knot Code
                   </span>
-                  {dirtyCount > 0 && (
-                    <span className="rounded-full bg-[color-mix(in_srgb,var(--brand)_12%,transparent)] px-2 py-0.5 text-[10px] font-semibold text-[var(--brand)]">
-                      {dirtyCount} dirty
-                    </span>
-                  )}
+                  <span
+                    className={`h-2 w-2 rounded-full ${
+                      status === 'connected'
+                        ? 'bg-emerald-400'
+                        : status === 'connecting'
+                          ? 'bg-amber-400 animate-pulse'
+                          : 'bg-[var(--text-disabled)]'
+                    }`}
+                  />
                 </div>
               </div>
 

components/chat-home.tsx

@@ -203,22 +203,26 @@ export const ChatHome = memo(function ChatHome({
             <KnotLogo size={40} color="var(--brand)" />
           </div>
 
-          <h1 className="text-center text-[32px] font-semibold tracking-[-0.04em] leading-none text-[var(--text-primary)]">
-            Let&apos;s build
+          <h1 className="text-center text-[28px] sm:text-[32px] font-semibold tracking-[-0.04em] leading-none text-[var(--text-primary)]">
+            Let&apos;s weave
           </h1>
 
-          {/* Workspace dropdown */}
+          {/* Workspace dropdown — hidden on mobile */}
           <button
             onClick={onSelectFolder}
-            className="codex-workspace-dropdown mt-2.5 inline-flex items-center gap-1.5 text-[14px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors cursor-pointer"
+            className="codex-workspace-dropdown mt-2.5 hidden sm:inline-flex items-center gap-1.5 text-[14px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors cursor-pointer"
           >
             {repoShort ?? 'Select workspace'}
             <Icon icon="lucide:chevron-down" width={14} height={14} className="opacity-50" />
           </button>
+          {/* Subtle tagline on mobile */}
+          <p className="mt-2 text-[13px] text-[var(--text-disabled)] sm:hidden">
+            Your AI-powered code companion
+          </p>
         </div>
 
-        {/* "Explore more" link */}
-        <div className="flex justify-end mb-2">
+        {/* "Explore more" link — desktop only */}
+        <div className="hidden sm:flex justify-end mb-2">
           <button
             onClick={() => emit('open-folder')}
             className="text-[12px] text-[var(--text-disabled)] hover:text-[var(--text-secondary)] transition-colors cursor-pointer"
@@ -227,8 +231,8 @@ export const ChatHome = memo(function ChatHome({
           </button>
         </div>
 
-        {/* Suggestion cards — 1-up mobile, 3-up desktop */}
-        <div className="codex-suggestion-grid grid grid-cols-1 sm:grid-cols-3 gap-2.5 sm:gap-3 mb-4 sm:mb-5">
+        {/* Suggestion cards — hidden on mobile, 3-up desktop */}
+        <div className="codex-suggestion-grid hidden sm:grid grid-cols-3 gap-3 mb-5">
           {suggestions.map((card, i) => (
             <button
               key={i}
@@ -323,12 +327,12 @@ export const ChatHome = memo(function ChatHome({
                 {/* Mode selector */}
                 <ModeSelector mode={agentMode} onChange={setAgentMode} size="sm" />
 
-                {/* Divider */}
-                <div className="w-px h-4 bg-[var(--border)]" />
+                {/* Divider — desktop only */}
+                <div className="hidden sm:block w-px h-4 bg-[var(--border)]" />
 
-                {/* Gateway status */}
+                {/* Gateway status — desktop only */}
                 <span
-                  className={`codex-pill inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[11px] font-medium border cursor-default ${
+                  className={`codex-pill hidden sm:inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[11px] font-medium border cursor-default ${
                     status === 'connected'
                       ? 'text-[var(--text-secondary)] border-[var(--border)] bg-[color-mix(in_srgb,var(--text-primary)_4%,transparent)]'
                       : 'text-[var(--text-disabled)] border-[var(--border)] bg-[color-mix(in_srgb,var(--text-primary)_3%,transparent)]'
@@ -338,12 +342,14 @@ export const ChatHome = memo(function ChatHome({
                   {status === 'connected' ? 'Local' : 'Offline'}
                 </span>
 
-                {/* Permissions */}
-                <PermissionsToggle size="sm" />
+                {/* Permissions — desktop only */}
+                <span className="hidden sm:inline-flex">
+                  <PermissionsToggle size="sm" />
+                </span>
 
-                {/* Branch pill */}
+                {/* Branch pill — desktop only */}
                 {branchName && (
-                  <span className="codex-pill inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[11px] font-medium text-[var(--text-secondary)] border border-[var(--border)] bg-[color-mix(in_srgb,var(--text-primary)_4%,transparent)] cursor-default">
+                  <span className="codex-pill hidden sm:inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[11px] font-medium text-[var(--text-secondary)] border border-[var(--border)] bg-[color-mix(in_srgb,var(--text-primary)_4%,transparent)] cursor-default">
                     <Icon icon="lucide:git-branch" width={12} height={12} />
                     {branchName}
                   </span>
@@ -370,9 +376,9 @@ export const ChatHome = memo(function ChatHome({
           </div>
         </div>
 
-        {/* Workspace setup (no workspace) */}
+        {/* Workspace setup (no workspace) — desktop only */}
         {!hasWorkspace && (
-          <div className="mt-6 sm:mt-8 space-y-3 sm:space-y-4">
+          <div className="mt-6 sm:mt-8 space-y-3 sm:space-y-4 hidden sm:block">
             <div className="h-px bg-[var(--border)]" />
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
               <button
@@ -421,8 +427,8 @@ export const ChatHome = memo(function ChatHome({
           </div>
         )}
 
-        {/* Footer */}
-        <div className="mt-6 sm:mt-8 flex justify-center">
+        {/* Footer — desktop only */}
+        <div className="mt-6 sm:mt-8 hidden sm:flex justify-center">
           <span className="text-[10px] font-mono tracking-[0.08em] text-[var(--text-disabled)] opacity-40 uppercase">
             KnotCode
           </span>