Flightdeck Agentic Kanban

FlightDeck——代理AI看板

一个企业代理看板，作为 Power Apps代码应用程序 （React+TypeScript+Vite）。FlightDeck通过自定义MCP服务器自动接收会议记录，使用AI代理提取行动项，填充并动态更新看板，并监控电子邮件/聊天信号以实时移动卡片。

该板包括显示代理活动的遥测刀片、分析仪表盘、与Foundry API直接集成的人工智能聊天，以及低信任代理操作的人在环审批。

目标受众： 英国科技公司、咨询公司和MSP需要自动化的会议到行动流程。

FlightDeck — Agentic Kanban Board *在Power Apps中运行的FlightDeck：带有AI创建任务的看板、低置信度代理操作的批准横幅、AI聊天助手以及显示代理活动和跨板智能警报的实时遥测。*

尝试现场演示 --交互式自动动画演示（无需登录）

______________________________________________________________________

它的作用

1. 会议记录进来了 通过Microsoft Teams webhook或委托Graph API访问
2. AI代理分析 记录、提取行动项、分配优先级并确定所有者
3. 任务显示在板上 在右侧列中，可以完全追溯到源代码会议
4. 信号监测 扫描电子邮件和团队聊天，查看完成、阻止、进度和升级信号
5. 每日总结 为利益相关者可见性而自动生成
6. 人在环审批 适用于董事会变更前的低置信度代理操作

______________________________________________________________________

建筑

┌─────────────────────────────────────────────────────────────────┐
│  Power Apps Host (Entra ID Auth, DLP, Governance)               │
├─────────────────────────────────────────────────────────────────┤
│  FlightDeck React SPA (Code App)                                │
│  ┌────────┬────────────────────────────┬──────────┬──────────┐  │
│  │Sidebar │     Kanban Board           │ AI Chat  │Telemetry │  │
│  │Org/Proj│  [Backlog][ToDo][InProg]   │ Panel    │ Blade    │  │
│  │Board   │  [Review][Done]            │ (direct  │ Agent    │  │
│  │Nav     │     DnD Cards              │  Foundry)│ Status   │  │
│  │        │                            │          │ Actions  │  │
│  │Analytics│ ┌──────────────────────┐  │          │ Metrics  │  │
│  │        │  │ Approval Banner      │  │          │ Activity │  │
│  └────────┴──┴──────────────────────┴──┴──────────┴──────────┘  │
├─────────────────────────────────────────────────────────────────┤
│  Service Layer (src/services/) — mock → Dataverse swap           │
├─────────────────────────────────────────────────────────────────┤
│  TanStack Query + Zustand State Management                       │
└────────────────┬──────────────────────┬─────────────────────────┘
                 │ @microsoft/power-apps│ Direct Foundry API
                 │ SDK (postMessage)    │ (chat panel)
                 ▼                      ▼
┌─────────────────────────────────────────────────────────────────┐
│  Dataverse Tables (9 tables, mc_ prefix, 11 lookup relations)   │
│  organization│project│board│column│task│comment│activitylog      │
│  agentaction │ boardmember                                       │
└────────┬─────────────────────────────┬──────────────────────────┘
         │ writes results              │ reads/queries
┌────────┴────────────┐     ┌──────────┴──────────────────────────┐
│ Container App       │     │ Work IQ MCP Servers                  │
│ (Orchestrator)      │     │ Mail│Calendar│Teams│User│SharePoint  │
├─────────────────────┤     │ Copilot│OneDrive│Word│Dataverse      │
│ Triggers:           │     └─────────────────────────────────────┘
│ • transcript-webhook│
│ • signal-scanner    │     ┌─────────────────────────────────────┐
│ • daily-summary     │     │ Custom Transcript MCP Servers        │
│ • subscription-renew│◄────┤ Delegated (OBO) — per-user transcripts│
└───┬───┬───┬───┬─────┘     │ Webhook (App) — tenant-wide events    │
    │   │   │   │           └─────────────────────────────────────┘
    ▼   ▼   ▼   ▼
┌──────────────────────────────────────────────────────┐
│ AI Foundry Agents (called via REST API)               │
│ ┌─────────────┐ ┌──────────────┐ ┌───────────────┐  │
│ │ Transcript  │ │ Board        │ │ Signal        │  │
│ │ Analyst     │ │ Manager      │ │ Monitor       │  │
│ │ (gpt-5)     │ │ (gpt-5-mini) │ │ (gpt-5-mini)  │  │
│ └─────────────┘ └──────────────┘ └───────────────┘  │
│ ┌─────────────┐                                      │
│ │ Summary     │                                      │
│ │ Agent       │                                      │
│ │ (gpt-5)     │                                      │
│ └─────────────┘                                      │
└──────────────────────────────────────────────────────┘

三层前端架构

FlightDeck遵循严格的三层分离，以最大限度地提高可测试性，并实现从模拟数据到BLOB的干净交换。

Components (presentation) → Hooks (business logic + TanStack Query) → Services (Dataverse CRUD)

• 第1层——组件： React组件仅处理渲染和用户交互。他们称之为数据和突变挂钩。组件中没有直接的数据获取或业务逻辑。
• 第2层——挂钩： 自定义挂钩封装了所有业务逻辑、TanStack查询配置（查询键、重取间隔、乐观更新）和变异连接。
• 第3层——服务： 每个服务文件都从生成的服务中重新导出。这 @microsoft/power-apps SDK通过CSP安全机制处理所有的Webex通信 postMessage 桥。

______________________________________________________________________

技术栈

______________________________________________________________________

特性

用看板图

• 使用@dnd kit拖放(DndContext, PointerSensor, KeyboardSensor, closestCorners)
• 5列：待办事项（灰色）、待办事项（蓝色）、进行中（琥珀色）、回顾（紫色）、完成（绿色）
• WIP限制，带视觉指示器，超过限制时拒绝拖动
• 分数索引(SORT_ORDER_GAP = 65536)用于DnD重新排序
• 任务详细信息面板（480px幻灯片），有3个选项卡：详细信息、评论、活动
• 内联编辑：选择（优先级、受让人、状态）、日历（截止日期）、复选框（阻止状态）
• 按列快速添加任务输入
• 键盘可访问的DnD（箭头键+空格）
• 实时轮询（通过TanStack查询的15秒重取间隔）

分析仪表板

• 4张总结卡：总任务、完成率%、代理贡献%、逾期计数
• 按状态列出的任务（使用列颜色的条形图）
• 按优先级列出的任务（使用优先级颜色的圆环图）
• 按来源列出的任务（圆环图）
• 随时间变化的活动（堆积面积图——代理与人类活动）
• 可排序/可过滤数据表（TanStack表）
• 选项卡：图表|数据表

AI聊天面板

• Direct Foundry API集成（无Copilot Studio或Direct Line依赖项）
• 与人工智能代理聊天，了解董事会查询、任务管理和见解
• 作为可折叠的右侧面板集成到AppShell中

遥测刀片

• 代理状态面板 --4个带有状态点（绿色/琥珀色/红色）的代理，显示最后操作的工具提示
• 代理动作提要 --实时提供带有状态徽章、置信度百分比和持续时间的代理操作
• 董事会指标 --2x2网格：进行中计数、已完成计数、趋势图标、WIP进度条
• 活动时间表 --带有动作类型图标的垂直时间线，代理强调着色

导航和搜索

• 分层侧栏：组织→ 项目→ 板（可折叠，w-14/w-56）
• 带cmdk的命令面板（Ctrl+K）--在所有任务中进行模糊搜索
• 筛选器弹出窗口：用于受让人、优先级、来源的复选框筛选器
• 董事会成员带着堆叠的头像和角色徽章蹦蹦跳跳

治理

• 板设置页面
• 项目设置页面
• 基于角色的访问（所有者/管理员/成员/查看者） useRoleAccess 钩子
• 对所有CRUD操作进行活动日志记录，并注明参与者归属
• 低置信度代理操作（接受/拒绝）的人工循环批准横幅

键盘快捷键

企业功能

• 代码拆分：React.lazy+所有页面的暂停，手动块（供应商反应、供应商基数、供应商查询、供应商dnd）
• 每个遥测部分和图表的错误边界隔离
• 响应式布局：自动折叠侧边栏（\ 注： gpt-5-mini不支持 temperature 参数。

______________________________________________________________________

自主触发管道

容器应用编排器（Express+node-cron）驱动四个自主管道，在没有用户交互的情况下触发代理活动。

1.转录webhook

触发： HTTP POST——新会议记录的图形更改通知。

Graph Change Notification → Orchestrator → transcript-analyst → board-manager → tasks created

从Microsoft Graph接收webhook，通过委托MCP服务器获取转录，调用转录分析师提取操作项，然后调用Board Manager创建任务。

2.信号扫描仪

触发： 计时器——每15分钟一次。

15-min timer → signal-monitor → board-manager (if confidence >= 0.7)

调用信号监视器扫描最近的电子邮件和团队消息。高置信度建议（>=0.7）被转发给董事会经理，以进行自动董事会更新。记录低置信度信号以供手动审查。

3.每日总结

触发： 计时器——每天08:00 UTC。

08:00 UTC timer → summary-agent → Teams notification

调用摘要代理以生成电路板摘要（已完成、正在进行、已阻止、已过期、工作负载）。输出以团队通知的形式发布。

4.续订

触发： 计时器——UTC每天午夜。

Midnight timer → auto-renew Graph webhook subscription

检查Graph webhook订阅到期情况，如果到期时间在24小时内，则续订。确保持续发送会议记录更改通知。

______________________________________________________________________

状态管理

商店状态

ui-store.ts --所有UI状态：

• 面板可见性： telemetryBladeOpen, chatPanelOpen, sidebarOpen, sidebarCollapsed
• 任务详细信息： selectedTaskId, taskDetailOpen
• 对话： newTaskDialogOpen, searchOpen, shortcutsDialogOpen
• 过滤器： FilterState （搜索字符串、assigneIds\[\]、优先级\[\]、源\[\]）

board-store.ts --导航上下文：

• currentOrgId, currentProjectId, currentBoardId

TanStack查询键

______________________________________________________________________

TypeScript接口

定义于 src/lib/types.ts:

______________________________________________________________________

关键设计决策

基于Fluent ui v9的shadcn/ui

Power Apps Code App启动器模板附带了shadcn/ui（Radix原语+Tailwind）。保持模板约定可以避免Fluent UI v9中约180KB的额外捆绑包大小。

2.WebSockets上的TanStack查询轮询

Power Apps Code Apps在Power Apps主机iframe内运行，不支持持久WebSocket连接。TanStack查询 refetchInterval: 15000 （15秒）在平台限制内通过轮询提供近乎实时的更新。

3.DnD重排序的分数索引

SORT_ORDER_GAP = 65536 提供分数索引。当一张卡在另外两张卡之间移动时，其排序顺序设置为中点。较大的缺口允许在需要重新平衡之前进行约16级细分。

4.服务抽象层

每个服务文件都从生成的服务中重新导出。mock-to-WEBSTswap只需要将每个服务文件中的导入从内联mock数据更改为 @/generated/services/Mc*Service 出口。

5.OKLCH颜色系统

OKLCH提供感知上均匀的颜色——相等的数字步长产生相等的视觉对比度变化。特别适用于黑暗模式，在这种模式下，十六进制/HSL颜色可能会出现褪色。

6.条件渲染上的CSS宽度转换

侧边栏和遥测刀片使用CSS transition: width 而不是条件渲染。这可以在打开/关闭期间保留组件状态，并在不重新安装的情况下实现流畅的动画。

7.集中键盘快捷键

所有快捷方式都注册在一个单一的 use-keyboard-shortcuts.ts 钩子以防止冲突。检查 document.activeElement 以避免在键入输入时触发。

8.英国日期格式

所有日期都通过日期fns使用en-GB区域设置。集中化 date-utils.ts 出口 formatDate, formatDateTime，以及 formatRelative.

9.错误边界隔离

每个遥测部分和图表都包裹在自己的ErrorBoundary中。如果一个图表崩溃，只有该部分显示回退。

10.Power Apps SDK后消息桥

这 @microsoft/power-apps SDK通过 postMessage 绕过CSP连接到主机iframe connect-src 'none' 直接阻止的限制 fetch() 电话。

______________________________________________________________________

路线

所有路线都包裹在 AppShell （三面板结构：侧边栏+主面板+遥测刀片）。路由器使用Power Apps BASENAME标准化：

const BASENAME = new URL(".", location.href).pathname

______________________________________________________________________

项目结构

AI_Kanban/
├── docs/
│   ├── architecture.md                    # Detailed architecture documentation
│   └── dataverse-setup.md                 # Complete Dataverse schema guide (390 lines)
│
├── infrastructure/
│   ├── agents/
│   │   ├── transcript-analyst.json        # AI Foundry: transcript analysis (gpt-5)
│   │   ├── board-manager.json             # AI Foundry: board CRUD (gpt-5-mini)
│   │   ├── signal-monitor.json            # AI Foundry: signal detection (gpt-5-mini)
│   │   └── summary-agent.json             # AI Foundry: board insights (gpt-5)
│   ├── bicep/
│   │   ├── main.bicep                     # Azure IaC (375 lines)
│   │   └── parameters.json               # Bicep parameter values
│   ├── docker/
│   │   ├── Dockerfile.mcp-delegated       # MCP: delegated (OBO) transcripts
│   │   ├── Dockerfile.mcp-webhook         # MCP: webhook (app-level) events
│   │   ├── docker-compose.yml             # Local dev compose
│   │   └── .dockerignore
│   ├── functions/
│   │   ├── src/index.js                   # Orchestrator (4 triggers)
│   │   ├── host.json                      # Functions host config
│   │   ├── local.settings.json            # Local dev settings
│   │   └── package.json
│   └── scripts/                           # Dataverse setup & seed scripts
│
├── src/
│   ├── components/
│   │   ├── analytics/                     # Charts (4), data table, chart skeleton
│   │   ├── chat/                          # AI chat panel (direct Foundry API)
│   │   ├── kanban/                        # Board, columns, cards, detail panel,
│   │   │                                  # approval banner, filters, search, members
│   │   ├── layout/                        # AppShell, CommandBar, Sidebar, TopBar
│   │   ├── shared/                        # ErrorBoundary, PriorityIcon, SourceBadge,
│   │   │                                  # UserAvatar, KeyboardShortcutsDialog
│   │   ├── telemetry/                     # TelemetryBlade, AgentStatusPanel,
│   │   │                                  # AgentActionFeed, BoardMetrics,
│   │   │                                  # ActivityTimeline, TelemetrySkeleton
│   │   └── ui/                            # shadcn/ui primitives (21 files)
│   │
│   ├── generated/                         # Dataverse client, services (9), choice maps,
│   │                                      # FoundryAgentClient
│   ├── hooks/                             # 12 custom hooks (TanStack Query + business logic)
│   ├── lib/                               # Types (13), constants, date-utils, utils
│   ├── pages/                             # Route pages (lazy-loaded)
│   ├── providers/                         # QueryProvider, ThemeProvider, SonnerProvider
│   ├── services/                          # 10 service re-exports + chat-service
│   └── stores/                            # Zustand: ui-store, board-store
│
├── components.json                        # shadcn/ui configuration
├── eslint.config.js                       # ESLint flat config
├── vite.config.ts                         # Vite + Power Apps plugin
├── tsconfig.json                          # TypeScript config
└── package.json                           # Dependencies and scripts

______________________________________________________________________

Azure部署

资源组： rg-flightdeck （英国南部）

端点

• 铸造厂： https://ai-flightdeck.services.ai.azure.com/api/projects/flightdeck-project
• ACR： crflightdeck.azurecr.io
• 密钥库： https://kv-flightdeck-dev.vault.azure.net/
• 编排者： orchestrator-dev.yellowmeadow-084e6936.uksouth.azurecontainerapps.io
• MCP委托： mcp-delegated-dev.yellowmeadow-084e6936.uksouth.azurecontainerapps.io
• MCP Webhook： mcp-webhook-dev.yellowmeadow-084e6936.uksouth.azurecontainerapps.io
• 数字链接： https://orged45fd63.crm.dynamics.com

______________________________________________________________________

指标

______________________________________________________________________

入门指南

先决条件

• Node.js 20+
• Power Apps命令行界面(pac)
• Azure订阅（适用于Foundry代理和容器应用程序）

发展

npm install
npm run dev

构建和部署

npm run build
pac pcf push --publisher-prefix mc

基础设施

# Deploy Azure resources
az deployment group create \
  --resource-group rg-flightdeck \
  --template-file infrastructure/bicep/main.bicep

Webex设置

看 docs/dataverse-setup.md 有关完整的表创建指南、列定义、选择列、查找关系和 pac code add-data-source 命令。

______________________________________________________________________

阶段构建日志

______________________________________________________________________

竞争格局

FlightDeck在市场上占有独特的地位。虽然有几个产品处理会议到任务流程的一部分，但没有一个产品将所有这些产品组合成微软企业堆栈中的一个自我更新的板。

功能对比

是什么让FlightDeck与众不同

1. 闭环代理管道 --成绩单→ AI提取→ 任务创建→ 信号监测→ 卡片移动→ 每日总结。没有其他产品链在连续的反馈循环中连接多个自主代理，在没有人为干预的情况下保持电路板的最新状态。

1. 通过电子邮件和聊天进行信号监控 --没有竞争对手会扫描电子邮件和团队消息，根据检测到的完成、阻止、进度或升级信号自动移动卡片。现有的工具是转录输入，任务输出。

1. 有信心得分的人在循环中 --置信度高于0.8的操作将自动应用；低于该阈值，他们会前往审批横幅进行人工审核。没有竞争对手提供这种渐进式自主模式。

1. 电源平台原生 --作为一个Power Apps代码应用程序构建，并使用BLOB作为数据存储。在Microsoft治理、DLP和身份范围内运行。企业IT团队无需第三方SaaS即可获得合规性。

1. 董事会和智能在一个应用程序中 --竞争对手要么是推动外部董事会的会议助理（萤火虫→ Trello）或没有会议情报的董事会（Planner、Trello、Jira）。FlightDeck两者都有。

竞争对手更强大的地方

• 萤火虫/水獭/谷物 --更成熟的转录引擎、更广泛的语言支持、更大的生态系统、消费者友好的定价
• M365副驾驶 --包含E3/E5许可证、零部署、庞大的用户群、深度团队集成
• Notion AI --更广泛的生产力平台、消费者吸引力、大型社区、灵活的数据库模型

开源

在GitHub上搜索结合了会议记录、人工智能代理和看板任务创建的存储库返回 零结果。唯一相关的repo是零星级的小型个人项目（基本的PDF动作项提取器）。没有开源项目尝试FlightDeck所做的事情。

当FlightDeck有意义时

• 已经使用Microsoft 365/Power Platform的组织希望留在生态系统中
• 在会议和电子邮件线程之间丢失行动项的团队
• 需要DLP策略、Entra ID治理和审计跟踪的环境
• 管理多个会议量大的客户委员会的咨询公司和MSP

当竞争对手更有意义时

• 想要免费/廉价工具而无需部署的小团队（萤火虫、水獭）
• 已经为M365 Copilot付费并对手动创建Planner任务感到满意的组织
• 不在微软堆栈上的团队（非微软商店的Notion AI）

______________________________________________________________________

许可证

专有的。保留所有权利。