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/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"