From aa27363314814df2b9d4a41a5eef5ef59bc53f8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Igor=20=C5=A0=C4=87eki=C4=87?= Date: Wed, 4 Feb 2026 12:07:53 +0100 Subject: [PATCH 1/2] feat(share): implement shared session page with database integration Add complete implementation for the shared session page that fetches session data from the database and displays it with a user-friendly interface. The page now validates UUIDs, queries session details with owner information, and provides CLI import functionality with copyable commands and an animated logo. --- src/app/s/[sessionId]/page.tsx | 76 +++++++++++++++++++++++++++++++--- 1 file changed, 70 insertions(+), 6 deletions(-) diff --git a/src/app/s/[sessionId]/page.tsx b/src/app/s/[sessionId]/page.tsx index 4d8581b893..6278f0baad 100644 --- a/src/app/s/[sessionId]/page.tsx +++ b/src/app/s/[sessionId]/page.tsx @@ -1,10 +1,74 @@ -export default function SharedSessionPage({ params }: { params: { sessionId: string } }) { - const { sessionId } = params; +import { db } from '@/lib/drizzle'; +import { eq } from 'drizzle-orm'; +import { cli_sessions_v2, kilocode_users } from '@/db/schema'; +import { notFound } from 'next/navigation'; +import { validate as isValidUUID } from 'uuid'; +import { AnimatedLogo } from '@/components/AnimatedLogo'; +import { CopyableCommand } from '@/components/CopyableCommand'; +import { APP_URL } from '@/lib/constants'; +import { OpenInCliButton } from '@/app/share/[shareId]/open-in-cli-button'; + +export const revalidate = 86400; + +export default async function SharedSessionPage({ + params, +}: { + params: Promise<{ sessionId: string }>; +}) { + const { sessionId } = await params; + + // Validate sessionId is a valid UUID before querying the database + if (!isValidUUID(sessionId)) { + return notFound(); + } + + const sessionResult = await db + .select({ + ownerName: kilocode_users.google_user_name, + title: cli_sessions_v2.title, + }) + .from(cli_sessions_v2) + .leftJoin(kilocode_users, eq(cli_sessions_v2.kilo_user_id, kilocode_users.id)) + .where(eq(cli_sessions_v2.public_id, sessionId)) + .limit(1); + + if (sessionResult.length === 0) { + return notFound(); + } + + const session = sessionResult[0]; + const shareUrl = `${APP_URL}/s/${sessionId}`; + const importCommand = `kilo import ${shareUrl}`; return ( -
-

Shared session

-

Session: {sessionId}

-
+
+
+ + +
+
+
+

+ {session.ownerName ?? 'Someone'} shared a session +

+ {session.title && ( +
{session.title}
+ )} +
+ +
+
Import this session in the CLI:
+
+ +
+ +
+
+
+
+
); } From 5b0753194a5e97880a76779e061c16b0e795e1a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Igor=20=C5=A0=C4=87eki=C4=87?= Date: Wed, 4 Feb 2026 12:17:54 +0100 Subject: [PATCH 2/2] feat(share): redesign shared session page with enhanced UI and animations Redesign the shared session page with a modern card-based layout featuring: - Gradient background with grid pattern overlay - Animated entrance effects for logo and content card - Improved responsive design with better mobile support - Enhanced visual hierarchy with Card components - Added installation link for users without CLI - Better organized import command section with descriptive text The new design provides a more polished and professional appearance while maintaining all existing functionality. --- src/app/s/[sessionId]/page.tsx | 75 +++++++++++++++++++++++++--------- 1 file changed, 55 insertions(+), 20 deletions(-) diff --git a/src/app/s/[sessionId]/page.tsx b/src/app/s/[sessionId]/page.tsx index 6278f0baad..dc2ea344ae 100644 --- a/src/app/s/[sessionId]/page.tsx +++ b/src/app/s/[sessionId]/page.tsx @@ -7,6 +7,7 @@ import { AnimatedLogo } from '@/components/AnimatedLogo'; import { CopyableCommand } from '@/components/CopyableCommand'; import { APP_URL } from '@/lib/constants'; import { OpenInCliButton } from '@/app/share/[shareId]/open-in-cli-button'; +import { Card, CardContent, CardHeader } from '@/components/ui/card'; export const revalidate = 86400; @@ -41,34 +42,68 @@ export default async function SharedSessionPage({ const importCommand = `kilo import ${shareUrl}`; return ( -
-
- +
+
+
+
+
+
+ +
+
+
+ +
-
-
-
-

+ + +

{session.ownerName ?? 'Someone'} shared a session

{session.title && ( -
{session.title}
+
+ {session.title} +
)} -

+ + + +
+
+
+
Import in CLI
+
+ Copy the command, then paste it in your terminal. +
+
+
+ +
+
-
-
Import this session in the CLI:
-
- +
+ +
- -
-
+ +
+ Need the CLI?{' '} + + Install Kilo + +
+ +
-
+
); }