@atercates/claude-deck 0.2.1

package/app/globals.css

@@ -0,0 +1,174 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "../styles/themes.css";
+
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-background: hsl(var(--sidebar-background));
+  --color-chart-5: hsl(var(--chart-5));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-1: hsl(var(--chart-1));
+  --color-ring: hsl(var(--ring));
+  --color-input: hsl(var(--input));
+  --color-border: hsl(var(--border));
+  --color-destructive: hsl(var(--destructive));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-card: hsl(var(--card));
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  /* Mobile viewport height - JS hook sets this dynamically for keyboard */
+  --app-height: 100vh;
+  --app-height: 100dvh;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   MOBILE LAYOUT STYLES
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* Prevent iOS bounce/overscroll on mobile */
+html,
+body {
+  overscroll-behavior: none;
+}
+
+/* Prevent all scrolling on mobile - we control scroll via xterm only */
+@media (max-width: 767px) {
+  html,
+  body {
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+    height: var(--app-height, 100dvh);
+  }
+}
+
+@media (max-width: 767px) {
+  /* Prevent text size adjustment on orientation change */
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
+
+  /* Disable text selection highlight on touch */
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* Allow scrolling in specific containers */
+  .mobile-scroll {
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+  }
+
+  /* Touch-friendly active states */
+  .touch-active:active {
+    transform: scale(0.98);
+    opacity: 0.9;
+  }
+
+  /* Mobile viewport height utilities */
+  .h-screen-safe {
+    height: 100vh;
+    height: 100dvh;
+  }
+}
+
+/* Hide scrollbar utility */
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+
+/* Thin scrollbar for xterm on mobile */
+@media (max-width: 768px) {
+  .xterm-viewport {
+    scrollbar-width: thin;
+  }
+  .xterm-viewport::-webkit-scrollbar {
+    width: 4px;
+  }
+  .xterm-viewport::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .xterm-viewport::-webkit-scrollbar-thumb {
+    background: hsl(var(--muted-foreground) / 0.3);
+    border-radius: 2px;
+  }
+}
+
+/* Safe area padding utilities */
+.safe-area-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* Mobile keyboard viewport handling */
+/* h-app uses --app-height which is set dynamically by useViewportHeight hook */
+.h-app {
+  height: var(--app-height, 100vh);
+}
+
+.min-h-app {
+  min-height: var(--app-height, 100vh);
+}
+
+.max-h-app {
+  max-height: var(--app-height, 100vh);
+}
+
+/* Terminal container on mobile - sized by flex layout, not explicit height */
+@media (max-width: 767px) {
+  .terminal-container {
+    overflow: hidden;
+  }
+}
+
+/* Terminal background - inherits from theme */
+.terminal-container {
+  background: hsl(var(--background));
+}

package/app/icon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#3b82f6"/>
+  <g transform="translate(4, 4)" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <path d="M12 8V4H8" />
+    <rect width="16" height="12" x="4" y="8" rx="2" />
+    <path d="M2 14h2" />
+    <path d="M20 14h2" />
+    <path d="M15 13v2" />
+    <path d="M9 13v2" />
+  </g>
+</svg>

package/app/layout.tsx

@@ -0,0 +1,122 @@
+import type { Metadata, Viewport } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { Toaster } from "sonner";
+import { Providers } from "@/components/Providers";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "ClaudeDeck",
+  description: "AI Agent Command Center",
+  manifest: "/manifest.json",
+  icons: {
+    icon: "/icon.svg",
+    apple: [
+      { url: "/icons/icon-152x152.png", sizes: "152x152" },
+      { url: "/icons/icon-192x192.png", sizes: "192x192" },
+    ],
+  },
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "black-translucent",
+    title: "ClaudeDeck",
+  },
+  other: {
+    "mobile-web-app-capable": "yes",
+  },
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: "cover",
+  interactiveWidget: "resizes-content",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        {/* Theme initialization script - prevents flash of unstyled content */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  // Get theme from localStorage (where next-themes stores it)
+                  const theme = localStorage.getItem('theme') || 'dark';
+                  const root = document.documentElement;
+
+                  // Handle system theme
+                  let actualTheme = theme;
+                  if (theme === 'system') {
+                    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                    actualTheme = isDark ? 'dark' : 'light';
+                  }
+
+                  // Parse compound themes like "dark-warm" or "light-default"
+                  const parts = actualTheme.split('-');
+                  const mode = parts[0];
+                  const variant = parts[1];
+
+                  // Apply theme class
+                  root.classList.remove('light', 'dark');
+                  root.classList.add(mode === 'dark' || mode === 'light' ? mode : 'dark');
+
+                  // Apply variant as data attribute
+                  // "deep" and "default" are base themes - no data attribute needed
+                  root.removeAttribute('data-theme-variant');
+                  if (variant && variant !== 'default' && variant !== 'deep') {
+                    root.setAttribute('data-theme-variant', variant);
+                  }
+                } catch (e) {
+                  // Fallback to dark mode if anything fails
+                  document.documentElement.classList.add('dark');
+                }
+              })();
+            `,
+          }}
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              if ('serviceWorker' in navigator) {
+                window.addEventListener('load', function() {
+                  navigator.serviceWorker.register('/sw.js');
+                });
+              }
+            `,
+          }}
+        />
+        <meta name="theme-color" content="#0a0a0a" />
+      </head>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <Providers>{children}</Providers>
+        <Toaster
+          position="top-center"
+          closeButton
+          toastOptions={{
+            className: "!bg-card !border-border !text-foreground !shadow-lg",
+          }}
+        />
+      </body>
+    </html>
+  );
+}