first

2026-02-16 19:34:35 +00:00
commit 9ab0940ca4
784 changed files with 41710 additions and 0 deletions
@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { useParams } from 'react-router';
+import { useQueryClient } from '@tanstack/react-query';
+import { DashboardLayout } from '../Layout';
+import { useClaude } from './useClaude';
+import { useOpenCode } from './useOpenCode';
+import { ChatPanel } from './ChatPanel';
+import { SessionList } from './SessionList';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
+import type { SessionEntry } from './types';
+
+export const ClaudeSessions = () => {
+  return (
+    <DashboardLayout>
+      <SessionList />
+    </DashboardLayout>
+  );
+};
+
+export const ClaudeChat = () => {
+  const { sessionId } = useParams<{ sessionId: string }>();
+  const queryClient = useQueryClient();
+  const sessions = queryClient.getQueryData<SessionEntry[]>(['SESSIONS']);
+  const sessionModel = sessions?.find((s) => s.id === sessionId)?.model;
+  const claude = useClaude(sessionId, sessionModel);
+  const claudeModels = useVisibleClaudeModels();
+
+  return (
+    <DashboardLayout mobileFull>
+      <div className="flex items-center justify-center h-full md:p-4">
+        <div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
+          <ChatPanel chat={claude} provider="claude" availableModels={claudeModels} />
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+};
+
+export const OpenCodeChat = () => {
+  const { sessionId } = useParams<{ sessionId: string }>();
+  const queryClient = useQueryClient();
+  const sessions = queryClient.getQueryData<SessionEntry[]>(['OC_SESSIONS']);
+  const sessionModel = sessions?.find((s) => s.id === sessionId)?.model;
+  const opencode = useOpenCode(sessionId, sessionModel);
+  const openCodeModels = useVisibleOpenCodeModels();
+
+  return (
+    <DashboardLayout mobileFull>
+      <div className="flex items-center justify-center h-full md:p-4">
+        <div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
+          <ChatPanel chat={opencode} provider="opencode" availableModels={openCodeModels} />
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+};
+
+const ClaudeNewChatInner = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode') => void }) => {
+  const claude = useClaude();
+  const claudeModels = useVisibleClaudeModels();
+  return (
+    <ChatPanel chat={claude} provider="claude" availableModels={claudeModels} onProviderChange={onProviderChange} />
+  );
+};
+
+const OpenCodeNewChatInner = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode') => void }) => {
+  const opencode = useOpenCode();
+  const openCodeModels = useVisibleOpenCodeModels();
+  return (
+    <ChatPanel
+      chat={opencode}
+      provider="opencode"
+      availableModels={openCodeModels}
+      onProviderChange={onProviderChange}
+    />
+  );
+};
+
+export const NewChat = () => {
+  const [provider, setProvider] = useState<'claude' | 'opencode'>('claude');
+
+  return (
+    <DashboardLayout mobileFull>
+      <div className="flex items-center justify-center h-full md:p-4">
+        <div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
+          {provider === 'claude' ? (
+            <ClaudeNewChatInner key="claude" onProviderChange={setProvider} />
+          ) : (
+            <OpenCodeNewChatInner key="opencode" onProviderChange={setProvider} />
+          )}
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+};