Merge pull request #10214 from Kilo-Org/docs/update-mobile-apps

Update mobile apps documentation

packages/kilo-docs/components/Image.tsx

@@ -6,6 +6,7 @@ interface ImageProps {
   width?: string
   height?: string
   caption?: string
+  compact?: boolean
 }
 
 // Helper to add 'px' to numeric values that don't have units
@@ -17,7 +18,7 @@ function addPxIfNeeded(value: string): string {
   return value
 }
 
-export function Image({ src, alt, width, height, caption }: ImageProps) {
+export function Image({ src, alt, width, height, caption, compact }: ImageProps) {
   const imgStyle: React.CSSProperties = {
     maxWidth: "100%",
     height: "auto",
@@ -27,7 +28,7 @@ export function Image({ src, alt, width, height, caption }: ImageProps) {
   if (height) imgStyle.height = addPxIfNeeded(height)
 
   const figureStyle: React.CSSProperties = {
-    margin: "1.5rem 0",
+    margin: compact ? "0" : "1.5rem 0",
     maxWidth: "100%",
     overflow: "hidden",
   }

packages/kilo-docs/components/ImageGallery.tsx

@@ -0,0 +1,52 @@
+import React, { Children, ReactElement, ReactNode, cloneElement, isValidElement } from "react"
+
+interface ImageGalleryProps {
+  children: ReactNode
+  columns?: string
+  width?: string
+}
+
+interface GalleryImageProps {
+  compact?: boolean
+}
+
+function addPxIfNeeded(value: string) {
+  if (/^\d+(\.\d+)?$/.test(value)) return `${value}px`
+  return value
+}
+
+export function ImageGallery({ children, columns = "3", width = "220px" }: ImageGalleryProps) {
+  const count = Number(columns)
+  const cols = Number.isFinite(count) && count > 0 ? Math.min(Math.floor(count), 4) : 3
+  const size = addPxIfNeeded(width)
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${size}), ${size}))`,
+        gap: "1rem",
+        alignItems: "start",
+        justifyContent: "center",
+        margin: "1.5rem 0",
+        maxWidth: `calc(${cols} * ${size} + ${cols - 1}rem)`,
+      }}
+    >
+      {Children.map(children, (child) => {
+        const item = isValidElement<GalleryImageProps>(child)
+          ? cloneElement(child as ReactElement<GalleryImageProps>, { compact: true })
+          : child
+
+        return (
+          <div
+            style={{
+              minWidth: 0,
+            }}
+          >
+            {item}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

packages/kilo-docs/components/index.js

@@ -5,6 +5,7 @@ export * from "./CopyPageButton"
 export * from "./Heading"
 export * from "./Icon"
 export * from "./Image"
+export * from "./ImageGallery"
 export * from "./KiloCodeIcon"
 export * from "./PageFooter"
 export * from "./PageVersionSwitcher"

packages/kilo-docs/markdoc/tags/image-gallery.markdoc.ts

@@ -0,0 +1,16 @@
+import { ImageGallery } from "../../components"
+
+export const imageGallery = {
+  render: ImageGallery,
+  children: ["tag"],
+  attributes: {
+    columns: {
+      type: String,
+      description: "Preferred number of image columns on wide screens",
+    },
+    width: {
+      type: String,
+      description: "Preferred width of each gallery image",
+    },
+  },
+}

packages/kilo-docs/markdoc/tags/index.ts

@@ -4,6 +4,7 @@ export * from "./codicon.markdoc"
 export * from "./tabs.markdoc"
 export * from "./icon.markdoc"
 export * from "./image.markdoc"
+export * from "./image-gallery.markdoc"
 export * from "./kilo-code-icon.markdoc"
 export * from "./video.markdoc"
 export * from "./youtube.markdoc"

packages/kilo-docs/pages/code-with-ai/platforms/mobile.md

@@ -5,20 +5,44 @@ description: "Using Kilo Code on iOS and Android"
 
 # Mobile Apps
 
-Kilo Code is coming to mobile! Soon you'll be able to use Kilo Code's powerful AI coding capabilities directly from your iOS or Android device.
+Use Kilo Code from your phone to keep coding sessions moving while you are away from your desk. The mobile app connects to Cloud Agents, KiloClaw, and remote sessions from your local CLI or editor extensions.
 
-{% callout type="info" title="Coming Soon" %}
-Mobile apps for iOS and Android are currently in development. Sign up to be notified when they launch!
+{% callout type="info" title="Android app available now" %}
+Install Kilo Code for Android from [Google Play](https://kilocode.onelink.me/ZzZZ/r10ni4zy).
 {% /callout %}
 
-## iOS App
+## What you can do
 
-The Kilo Code iOS app will bring AI-powered coding assistance to your iPhone and iPad.
+The mobile app lets you:
 
-[Learn more about the iOS app →](https://kilo.ai/features/ios-app)
+- View and manage Kilo Code sessions, including remote CLI and extension sessions running on your local machine.
+- Chat with KiloClaw from your phone.
+- Spawn Cloud Agents and code directly from the app.
+- Monitor and view all non-remote sessions in one place.
+- Create, onboard, and manage KiloClaw instances.
+
+{% imageGallery columns="3" width="220px" %}
+{% image src="/docs/img/mobile-apps/home.webp" alt="Kilo Code mobile home screen showing KiloClaw and active agent sessions" caption="Start coding tasks, open KiloClaw, and resume active sessions from the mobile home screen." /%}
+
+{% image src="/docs/img/mobile-apps/new-session.webp" alt="Kilo Code mobile new session screen with coding mode selector" caption="Create a new Cloud Agent session and choose the right mode for the task." /%}
+
+{% image src="/docs/img/mobile-apps/session-chat.webp" alt="Kilo Code mobile session chat with an active coding task" caption="Review progress and continue coding conversations from the mobile app." /%}
+{% /imageGallery %}
+
+{% imageGallery columns="2" width="220px" %}
+{% image src="/docs/img/mobile-apps/kiloclaw-chat.webp" alt="KiloClaw chat in the Kilo Code mobile app" caption="Chat with KiloClaw on mobile." /%}
+
+{% image src="/docs/img/mobile-apps/session-filters.webp" alt="Kilo Code mobile session filter panel for Cloud Extension CLI Slack and other platforms" caption="Filter sessions by platform and project, including Cloud, Extension, CLI, Slack, and other sessions." /%}
+{% /imageGallery %}
 
 ## Android App
 
-The Kilo Code Android app will let you code with AI assistance on your Android phone or tablet.
+The Android app is available now on Google Play.
 
-[Learn more about the Android app →](https://kilo.ai/features/android-app)
+[Install the Android app →](https://kilocode.onelink.me/ZzZZ/r10ni4zy)
+
+## iOS App
+
+The iOS app is in review with the App Store team and will be available soon. You can already sign up for the iOS waitlist to be notified when it launches.
+
+[Join the iOS app waitlist →](https://kilo.ai/features/ios-app)