no passkey gate

src/apps/officer-web/Screens/Dashboard/Settings/ResourceSettings/index.tsx

@@ -6,6 +6,8 @@ import { Button } from '@/components/ui/button';
 import { Card } from '@/components/Card';
 import { useClient } from 'hooks/useClient';
 import { DashboardLayout } from '../../Layout';
+import { EmbeddableChat, useClaude, useOpenCode } from 'plugins/Chat/client';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
 
 type AppStatus = {
   id: string;
@@ -77,10 +79,12 @@ export const ResourceSettings = () => {
     return app.hasUpdate && !(app.manualUpdateCommand ?? app.manualInstallCommand);
   };
 
+  const [provider, setProvider] = useState<'claude' | 'opencode'>('claude');
+
   return (
     <DashboardLayout>
-      <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
-        <Card className="w-full max-w-2xl h-fit p-6">
+      <div className="flex h-full gap-4 px-4 py-8 overflow-hidden">
+        <Card className="w-full max-w-2xl h-fit p-6 overflow-y-auto">
           <h2 className="text-lg font-bold text-duck-dark mb-1">Applications</h2>
           <p className="text-sm text-duck-dark/60 mb-6">System tools and dependencies used by Officer.dev</p>
 
@@ -163,7 +167,47 @@ export const ResourceSettings = () => {
             </div>
           )}
         </Card>
+
+        <Card className="flex-1 min-w-0 flex flex-col overflow-hidden">
+          {provider === 'claude' ? (
+            <ClaudeChat key="claude" onProviderChange={setProvider} />
+          ) : (
+            <OpenCodeChat key="opencode" onProviderChange={setProvider} />
+          )}
+        </Card>
       </div>
     </DashboardLayout>
   );
 };
+
+type ChatInnerProps = {
+  onProviderChange: (p: 'claude' | 'opencode') => void;
+};
+
+const ClaudeChat = ({ onProviderChange }: ChatInnerProps) => {
+  const chat = useClaude(undefined, undefined, { replaceUrl: false });
+  const models = useVisibleClaudeModels();
+  return (
+    <EmbeddableChat
+      chat={chat}
+      provider="claude"
+      availableModels={models}
+      onProviderChange={onProviderChange}
+      className="flex-1 min-h-0"
+    />
+  );
+};
+
+const OpenCodeChat = ({ onProviderChange }: ChatInnerProps) => {
+  const chat = useOpenCode(undefined, undefined, { replaceUrl: false });
+  const models = useVisibleOpenCodeModels();
+  return (
+    <EmbeddableChat
+      chat={chat}
+      provider="opencode"
+      availableModels={models}
+      onProviderChange={onProviderChange}
+      className="flex-1 min-h-0"
+    />
+  );
+};