claude-code streaming chat, desktop remote viewer, new-automation route, tiktok task v4, misc fixes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/apps/officer-web/App.tsx

@@ -43,6 +43,7 @@ export function App() {
             <Route path="/settings/integrations" element={<Dashboard.IntegrationsSettings />} />
             <Route path="/settings/apps" element={<Dashboard.AppsSettings />} />
             <Route path="/automation" element={<Dashboard.Automation />} />
+            <Route path="/new-automation" element={<Dashboard.NewAutomation />} />
             <Route path="/chat" element={<Dashboard.SessionListPage />} />
             <Route path="/chat/new" element={<Dashboard.SessionListPage isNew />} />
             <Route path="/chat/:sessionId" element={<Dashboard.SessionListPage />} />
@@ -63,6 +64,7 @@ export function App() {
             <Route path="/email/:emailId" element={<Dashboard.EmailScreen />} />
             <Route path="/browser" element={<Dashboard.BrowserScreen />} />
             <Route path="/terminal" element={<Dashboard.TerminalScreen />} />
+            <Route path="/desktop" element={user?.role === 'Super Admin' ? <Dashboard.DesktopScreen /> : <Navigate to="/" replace />} />
             <Route path="/auth/signout" element={<Authentication.SignoutScreen />} />
             <Route path="*" element={<Navigate to="/" replace />} />
           </Routes>

src/apps/officer-web/Screens/Dashboard/Desktop/DesktopScreen.tsx

@@ -0,0 +1,14 @@
+import type { LayoutNode } from 'officerdev';
+import { WorkspaceView } from 'officerdev';
+import { useDashboardState } from 'state/useDashboardState';
+import { defaultLayout } from './defaultLayout';
+
+export const DesktopScreen = () => {
+  const workspace = useDashboardState<LayoutNode>('screens/desktop', defaultLayout);
+
+  return (
+    <div className="h-full w-full">
+      <WorkspaceView workspace={workspace} locked />
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Desktop/defaultLayout.ts

@@ -0,0 +1,7 @@
+import type { LayoutNode } from 'officerdev';
+
+export const defaultLayout: LayoutNode = {
+  type: 'panel',
+  id: 'desktop-screen',
+  appType: 'officerdev/desktop',
+};

src/apps/officer-web/Screens/Dashboard/Desktop/index.tsx

@@ -0,0 +1 @@
+export * from './DesktopScreen';

src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx

@@ -110,7 +110,7 @@ export const Dock = ({ items, className }: DockProps) => {
 };
 
 
-import { Home, MessageCircle, FileText, FolderOpen, Code, LayoutGrid, Bot, ScrollText, FolderKanban, Monitor, Mail, Globe } from 'lucide-react';
+import { Home, MessageCircle, FileText, FolderOpen, Code, LayoutGrid, Bot, ScrollText, FolderKanban, Monitor, Mail, Globe, MonitorSmartphone } from 'lucide-react';
 
 export const ALL_DOCK_ITEMS: DockItem[] = [
   { label: 'Home', to: '/', icon: Home, color: '#f59e0b' },
@@ -124,6 +124,7 @@ export const ALL_DOCK_ITEMS: DockItem[] = [
   { label: 'Terminal', to: '/terminal', icon: Monitor, color: '#f97316' },
   { label: 'Projects', to: '/projects', icon: FolderKanban, color: '#10b981' },
   { label: 'Browser', to: '/browser', icon: Globe, color: '#06b6d4' },
+  { label: 'Desktop', to: '/desktop', icon: MonitorSmartphone, color: '#ec4899', role: 'Super Admin' },
   { label: 'Dashboards', to: '/dashboards', icon: LayoutGrid, color: '#8b5cf6' },
 ];
 

src/apps/officer-web/Screens/Dashboard/NewAutomation/index.tsx

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import type { LayoutNode, PanelComponents } from 'officerdev';
+import { WorkspaceLayout } from 'officerdev';
+
+const LeftPanel = () => {
+  return <div className="h-full w-full p-4" />;
+};
+
+const RightPanel = () => {
+  return <div className="h-full w-full p-4" />;
+};
+
+const layout: LayoutNode = {
+  type: 'group',
+  id: 'new-automation-root',
+  direction: 'horizontal',
+  children: [
+    { node: { type: 'panel', id: 'new-automation-left', appType: null }, size: 30 },
+    { node: { type: 'panel', id: 'new-automation-right', appType: null }, size: 70 },
+  ],
+};
+
+export const NewAutomation = () => {
+  const panelComponents: PanelComponents = useMemo(
+    () => ({
+      'new-automation-left': LeftPanel,
+      'new-automation-right': RightPanel,
+    }),
+    [],
+  );
+
+  return (
+    <div className="h-full w-full pt-2">
+      <WorkspaceLayout layout={layout} onLayoutChange={() => {}} components={panelComponents} />
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Settings/IntegrationsSettings/TelegramAccount.tsx

@@ -12,6 +12,7 @@ type TelegramConnection = {
 type TelegramStatus = {
   configured: boolean;
   running: boolean;
+  botUsername: string | null;
   serverInvite: string | null;
   botHandle: string | null;
 };
@@ -23,6 +24,7 @@ export const TelegramAccount = () => {
   const [botStatus, setBotStatus] = useState<TelegramStatus>({
     configured: false,
     running: false,
+    botUsername: null,
     serverInvite: null,
     botHandle: null,
   });
@@ -81,8 +83,23 @@ export const TelegramAccount = () => {
     );
   }
 
-  const connectionInfo = (botStatus.serverInvite || botStatus.botHandle) && (
+  const botHandle = botStatus.botUsername ? `@${botStatus.botUsername}` : botStatus.botHandle;
+  const botLink = botStatus.botUsername ? `https://t.me/${botStatus.botUsername}` : null;
+
+  const connectionInfo = (botHandle || botStatus.serverInvite) && (
     <div className="rounded-lg border border-duck-dark/10 dark:border-foreground/10 p-4 grid gap-2">
+      {botHandle && (
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-duck-dark/50 dark:text-foreground/50 shrink-0">Bot:</span>
+          {botLink ? (
+            <a href={botLink} target="_blank" rel="noopener noreferrer" className="text-duck-teal underline">
+              {botHandle}
+            </a>
+          ) : (
+            <code className="text-xs bg-duck-dark/5 dark:bg-foreground/5 px-2 py-1 rounded">{botHandle}</code>
+          )}
+        </div>
+      )}
       {botStatus.serverInvite && (
         <div className="flex items-center gap-2 text-sm">
           <span className="text-duck-dark/50 dark:text-foreground/50 shrink-0">Group:</span>
@@ -96,12 +113,6 @@ export const TelegramAccount = () => {
           </a>
         </div>
       )}
-      {botStatus.botHandle && (
-        <div className="flex items-center gap-2 text-sm">
-          <span className="text-duck-dark/50 dark:text-foreground/50 shrink-0">Bot:</span>
-          <code className="text-xs bg-duck-dark/5 dark:bg-foreground/5 px-2 py-1 rounded">{botStatus.botHandle}</code>
-        </div>
-      )}
     </div>
   );
 
@@ -131,7 +142,7 @@ export const TelegramAccount = () => {
   return (
     <div className="grid gap-4">
       <p className="text-sm text-duck-dark/60 dark:text-foreground/60">
-        Link your Telegram account to chat with your PI agent via direct messages.
+        Link your Telegram account to chat with your agent via direct messages{botHandle ? ` to ${botHandle}` : ''}.
       </p>
 
       {connectionInfo}
@@ -153,7 +164,15 @@ export const TelegramAccount = () => {
             </Button>
           </div>
           <p className="text-xs text-duck-dark/50 dark:text-foreground/50">
-            Send this code as a direct message to the bot on Telegram. Expires in 10 minutes.
+            Send this code as a direct message to{' '}
+            {botLink ? (
+              <a href={botLink} target="_blank" rel="noopener noreferrer" className="text-duck-teal underline">
+                {botHandle}
+              </a>
+            ) : (
+              <strong>{botHandle ?? 'the bot'}</strong>
+            )}{' '}
+            on Telegram. Expires in 10 minutes.
           </p>
           <Button
             type="button"

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

@@ -7,6 +7,7 @@ export * from './Processes';
 export * from './CapabilityPage';
 export * from './Settings';
 export * from './Automation';
+export * from './NewAutomation';
 export * from './Skills';
 export * from './TaskLogs';
 export * from './Tasks';
@@ -18,3 +19,4 @@ export * from './Projects';
 export * from './Terminal';
 export * from './Email';
 export * from './Browser';
+export * from './Desktop';