diff --git a/backend/internal/config/config.go b/backend/internal/config/config.go
index 881c6ae6d848..8202aeb91d95 100644
--- a/backend/internal/config/config.go
+++ b/backend/internal/config/config.go
@@ -32,7 +32,7 @@ const (
 
 // DefaultCSPPolicy is the default Content-Security-Policy with nonce support
 // __CSP_NONCE__ will be replaced with actual nonce at request time by the SecurityHeaders middleware
-const DefaultCSPPolicy = "default-src 'self'; worker-src 'self' blob:; script-src 'self' __CSP_NONCE__ https://accounts.google.com/gsi/client https://challenges.cloudflare.com https://*.alicdn.com https://static.cloudflareinsights.com https://turing.captcha.qcloud.com https://turing.captcha.gtimg.com https://ca.turing.captcha.qcloud.com https://global.turing.captcha.gtimg.com https://www.tycaptcha.com https://cloudcache.tencentcs.com https://*.stripe.com https://static.airwallex.com https://checkout.airwallex.com https://static-demo.airwallex.com https://checkout-demo.airwallex.com; style-src 'self' 'unsafe-inline' https://*.captcha.gtimg.com https://accounts.google.com/gsi/style https://fonts.googleapis.com https://*.alicdn.com https://static.airwallex.com https://checkout.airwallex.com https://static-demo.airwallex.com https://checkout-demo.airwallex.com; img-src 'self' data: blob: https:; font-src 'self' data: https://fonts.gstatic.com; connect-src 'self' https://accounts.google.com/gsi/ https://turing.captcha.qcloud.com https://www.tycaptcha.com https://rce.tencentrio.com https:; frame-src https://accounts.google.com/gsi/ https://challenges.cloudflare.com https://turing.captcha.qcloud.com https://ca.turing.captcha.qcloud.com https://www.tycaptcha.com https://*.stripe.com https://checkout.airwallex.com https://checkout-demo.airwallex.com; frame-ancestors 'none'; base-uri 'self'; form-action 'self'"
+const DefaultCSPPolicy = "default-src 'self'; worker-src 'self' blob:; script-src 'self' __CSP_NONCE__ https://accounts.google.com/gsi/client https://challenges.cloudflare.com https://*.alicdn.com https://static.cloudflareinsights.com https://turing.captcha.qcloud.com https://turing.captcha.gtimg.com https://ca.turing.captcha.qcloud.com https://global.turing.captcha.gtimg.com https://www.tycaptcha.com https://cloudcache.tencentcs.com https://*.stripe.com https://static.airwallex.com https://checkout.airwallex.com https://static-demo.airwallex.com https://checkout-demo.airwallex.com; style-src 'self' 'unsafe-inline' https://*.captcha.gtimg.com https://accounts.google.com/gsi/style https://fonts.googleapis.com https://*.alicdn.com https://static.airwallex.com https://checkout.airwallex.com https://static-demo.airwallex.com https://checkout-demo.airwallex.com; img-src 'self' data: blob: https:; font-src 'self' data: https://fonts.gstatic.com; connect-src 'self' http://127.0.0.1:43110 http://127.0.0.1:43111 http://127.0.0.1:43112 http://127.0.0.1:43113 http://127.0.0.1:43114 http://127.0.0.1:43115 http://127.0.0.1:43116 http://127.0.0.1:43117 http://127.0.0.1:43118 http://127.0.0.1:43119 https://accounts.google.com/gsi/ https://turing.captcha.qcloud.com https://www.tycaptcha.com https://rce.tencentrio.com https:; frame-src https://accounts.google.com/gsi/ https://challenges.cloudflare.com https://turing.captcha.qcloud.com https://ca.turing.captcha.qcloud.com https://www.tycaptcha.com https://*.stripe.com https://checkout.airwallex.com https://checkout-demo.airwallex.com; frame-ancestors 'none'; base-uri 'self'; form-action 'self'"
 
 // UMQ（用户消息队列）模式常量
 const (
diff --git a/backend/internal/server/middleware/security_headers.go b/backend/internal/server/middleware/security_headers.go
index 203f0e4609ab..3f904cac7035 100644
--- a/backend/internal/server/middleware/security_headers.go
+++ b/backend/internal/server/middleware/security_headers.go
@@ -94,6 +94,17 @@ var requiredCSPDirectiveValues = []struct {
 	{"style-src", AirwallexDemoStaticDomain},
 	{"style-src", AirwallexDemoCheckoutDomain},
 	{"frame-src", AirwallexDemoCheckoutDomain},
+	// @project-doc docs/interfaces/tf_cli_web_import.md#browser_security_headers
+	{"connect-src", "http://127.0.0.1:43110"},
+	{"connect-src", "http://127.0.0.1:43111"},
+	{"connect-src", "http://127.0.0.1:43112"},
+	{"connect-src", "http://127.0.0.1:43113"},
+	{"connect-src", "http://127.0.0.1:43114"},
+	{"connect-src", "http://127.0.0.1:43115"},
+	{"connect-src", "http://127.0.0.1:43116"},
+	{"connect-src", "http://127.0.0.1:43117"},
+	{"connect-src", "http://127.0.0.1:43118"},
+	{"connect-src", "http://127.0.0.1:43119"},
 }
 
 // GenerateNonce generates a cryptographically secure random nonce.
diff --git a/backend/internal/server/middleware/security_headers_test.go b/backend/internal/server/middleware/security_headers_test.go
index f337462c71ae..70588a32926f 100644
--- a/backend/internal/server/middleware/security_headers_test.go
+++ b/backend/internal/server/middleware/security_headers_test.go
@@ -2,6 +2,7 @@ package middleware
 
 import (
 	"encoding/base64"
+	"fmt"
 	"net/http"
 	"net/http/httptest"
 	"strings"
@@ -346,7 +347,19 @@ func TestEnhanceCSPPolicy(t *testing.T) {
 		assert.Equal(t, 1, countDirectiveValue(enhanced, "worker-src", TencentCaptchaWorkerSource))
 	})
 
-	t.Run("default_policy_already_carries_tencent_captcha_domains", func(t *testing.T) {
+	t.Run("adds_only_the_tf_cli_loopback_ports", func(t *testing.T) {
+		policy := "default-src 'self'; connect-src 'self'"
+		enhanced := enhanceCSPPolicy(policy)
+
+		for port := 43110; port <= 43119; port++ {
+			origin := fmt.Sprintf("http://127.0.0.1:%d", port)
+			assert.Equal(t, 1, countDirectiveValue(enhanced, "connect-src", origin))
+		}
+		assert.NotContains(t, enhanced, "http://127.0.0.1:*")
+		assert.NotContains(t, enhanced, "http://localhost")
+	})
+
+	t.Run("default_policy_already_carries_required_domains", func(t *testing.T) {
 		// 默认策略与中间件强制注入表必须同形，否则 config.example.yaml 会误导自建用户
 		for _, required := range requiredCSPDirectiveValues {
 			assert.Equal(t, 1, countDirectiveValue(config.DefaultCSPPolicy, required.directive, required.value),
diff --git a/deploy/config.example.yaml b/deploy/config.example.yaml
index 7401f015eb3f..555d346a0acc 100644
--- a/deploy/config.example.yaml
+++ b/deploy/config.example.yaml
@@ -176,7 +176,7 @@ security:
     # 默认 CSP 策略（如果静态资源托管在其他域名，请自行覆盖）
     # Note: __CSP_NONCE__ will be replaced with 'nonce-xxx' at request time for inline script security
     # 注意：__CSP_NONCE__ 会在请求时被替换为 'nonce-xxx'，用于内联脚本安全
-    policy: "default-src 'self'; worker-src 'self' blob:; script-src 'self' __CSP_NONCE__ https://accounts.google.com/gsi/client https://challenges.cloudflare.com https://*.alicdn.com https://static.cloudflareinsights.com https://turing.captcha.qcloud.com https://turing.captcha.gtimg.com https://ca.turing.captcha.qcloud.com https://global.turing.captcha.gtimg.com https://www.tycaptcha.com https://cloudcache.tencentcs.com https://*.stripe.com https://static.airwallex.com https://checkout.airwallex.com https://static-demo.airwallex.com https://checkout-demo.airwallex.com; style-src 'self' 'unsafe-inline' https://*.captcha.gtimg.com https://accounts.google.com/gsi/style https://fonts.googleapis.com https://*.alicdn.com https://static.airwallex.com https://checkout.airwallex.com https://static-demo.airwallex.com https://checkout-demo.airwallex.com; img-src 'self' data: blob: https:; font-src 'self' data: https://fonts.gstatic.com; connect-src 'self' https://accounts.google.com/gsi/ https://turing.captcha.qcloud.com https://www.tycaptcha.com https://rce.tencentrio.com https:; frame-src https://accounts.google.com/gsi/ https://challenges.cloudflare.com https://turing.captcha.qcloud.com https://ca.turing.captcha.qcloud.com https://www.tycaptcha.com https://*.stripe.com https://checkout.airwallex.com https://checkout-demo.airwallex.com; frame-ancestors 'none'; base-uri 'self'; form-action 'self'"
+    policy: "default-src 'self'; worker-src 'self' blob:; script-src 'self' __CSP_NONCE__ https://accounts.google.com/gsi/client https://challenges.cloudflare.com https://*.alicdn.com https://static.cloudflareinsights.com https://turing.captcha.qcloud.com https://turing.captcha.gtimg.com https://ca.turing.captcha.qcloud.com https://global.turing.captcha.gtimg.com https://www.tycaptcha.com https://cloudcache.tencentcs.com https://*.stripe.com https://static.airwallex.com https://checkout.airwallex.com https://static-demo.airwallex.com https://checkout-demo.airwallex.com; style-src 'self' 'unsafe-inline' https://*.captcha.gtimg.com https://accounts.google.com/gsi/style https://fonts.googleapis.com https://*.alicdn.com https://static.airwallex.com https://checkout.airwallex.com https://static-demo.airwallex.com https://checkout-demo.airwallex.com; img-src 'self' data: blob: https:; font-src 'self' data: https://fonts.gstatic.com; connect-src 'self' http://127.0.0.1:43110 http://127.0.0.1:43111 http://127.0.0.1:43112 http://127.0.0.1:43113 http://127.0.0.1:43114 http://127.0.0.1:43115 http://127.0.0.1:43116 http://127.0.0.1:43117 http://127.0.0.1:43118 http://127.0.0.1:43119 https://accounts.google.com/gsi/ https://turing.captcha.qcloud.com https://www.tycaptcha.com https://rce.tencentrio.com https:; frame-src https://accounts.google.com/gsi/ https://challenges.cloudflare.com https://turing.captcha.qcloud.com https://ca.turing.captcha.qcloud.com https://www.tycaptcha.com https://*.stripe.com https://checkout.airwallex.com https://checkout-demo.airwallex.com; frame-ancestors 'none'; base-uri 'self'; form-action 'self'"
   proxy_probe:
     # Allow skipping TLS verification for proxy probe (debug only)
     # 允许代理探测时跳过 TLS 证书验证（仅用于调试）
diff --git a/docs/index.md b/docs/index.md
index 9b1e7667ab00..eec4846083a1 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -14,5 +14,5 @@
 
 - [架构](architecture/index.md)：系统组成、进程启动、网关请求链路、账号调度和缓存一致性。读取时机：修改应用装配、服务边界、请求转发、调度快照或故障转移时读取。
 - [领域](domains/index.md)：身份租户、网关策略、计费额度、支付推广、内容审核和后台任务规则。读取时机：修改核心实体、业务不变量、状态转换、风险策略或结算规则时读取。
-- [接口](interfaces/index.md)：HTTP 路由、配置来源、账号能力矩阵、模型目录和六类上游平台适配契约。读取时机：修改外部 API、配置项、协议转换、错误响应或第三方集成时读取。
+- [接口](interfaces/index.md)：HTTP 路由、配置来源、浏览器回环导入、账号能力矩阵、模型目录和上游平台适配契约。读取时机：修改外部 API、配置项、协议转换、错误响应或第三方集成时读取。
 - [运维](operations/index.md)：部署迁移、账号/传输维护、监控告警、数据共享、开发流程和入口安全。读取时机：构建、发布、迁移、排障、数据维护或同步上游时读取。
diff --git a/docs/interfaces/configuration.md b/docs/interfaces/configuration.md
index 4a12936e7239..5279dcb717f1 100644
--- a/docs/interfaces/configuration.md
+++ b/docs/interfaces/configuration.md
@@ -97,7 +97,7 @@ Grok 文本转发有三项数据库运行时设置：`grok_default_text_model`
 
 `gateway.grok` 属于启动时进程配置。`password_auth_enabled` 默认关闭并控制邮箱密码到 SSO/OAuth 的敏感入口；Free OAuth 本地软门禁由 `free_quota_soft_gate_enabled`、`free_quota_token_limit`、`free_quota_soft_gate_percent`、`free_quota_window_hours` 和 `free_quota_stats_cache_seconds` 控制。所有数值在启动时校验，修改后需要重启；统计缓存 miss 或查询故障按 fail-open 处理，但不能放宽 OAuth state 一次性消费、凭据持久化或 URL 信任边界。
 
-验证码同样属于数据库运行时设置。Turnstile、腾讯天御与阿里云验证码 2.0 三者互斥。腾讯天御启用时必须同时具备正整数 `CaptchaAppId`、`AppSecretKey`、腾讯云 `SecretId` 和 `SecretKey`，并选择 `cn` 中国站或 `intl` 国际站；站点决定前端 SDK、构造函数形式、控制台入口和服务端票据校验 endpoint，`CaptchaAppId` 与云密钥必须来自同一站点，缺失或非法站点按 `cn` 回退。阿里云启用时必须具备 Scene ID、Prefix、AccessKey ID、AccessKey Secret 及 `cn` 或 `sgp` 地域。公开设置只返回各提供方的启用状态、站点和渲染所需的非敏感参数；管理响应只返回 secret 的“已配置”标记，空白更新保留原值，审计仅记录字段发生写入而不记录内容。腾讯与阿里云 Web SDK 所需的脚本、连接、iframe、worker 和样式来源由默认 CSP 与运行时 CSP 补全逻辑共同维护，覆盖自定义旧策略时也不能遗漏，其中阿里云静态资源允许 `https://*.alicdn.com`。Google GIS 同样由默认策略与旧自定义策略增强共同允许：`script-src` 仅加入 `https://accounts.google.com/gsi/client`，`frame-src`/`connect-src` 加入 `https://accounts.google.com/gsi/`，`style-src` 加入 `https://accounts.google.com/gsi/style`。
+验证码同样属于数据库运行时设置。Turnstile、腾讯天御与阿里云验证码 2.0 三者互斥。腾讯天御启用时必须同时具备正整数 `CaptchaAppId`、`AppSecretKey`、腾讯云 `SecretId` 和 `SecretKey`，并选择 `cn` 中国站或 `intl` 国际站；站点决定前端 SDK、构造函数形式、控制台入口和服务端票据校验 endpoint，`CaptchaAppId` 与云密钥必须来自同一站点，缺失或非法站点按 `cn` 回退。阿里云启用时必须具备 Scene ID、Prefix、AccessKey ID、AccessKey Secret 及 `cn` 或 `sgp` 地域。公开设置只返回各提供方的启用状态、站点和渲染所需的非敏感参数；管理响应只返回 secret 的“已配置”标记，空白更新保留原值，审计仅记录字段发生写入而不记录内容。腾讯与阿里云 Web SDK 所需的脚本、连接、iframe、worker 和样式来源由默认 CSP 与运行时 CSP 补全逻辑共同维护，覆盖自定义旧策略时也不能遗漏，其中阿里云静态资源允许 `https://*.alicdn.com`。Google GIS 同样由默认策略与旧自定义策略增强共同允许：`script-src` 仅加入 `https://accounts.google.com/gsi/client`，`frame-src`/`connect-src` 加入 `https://accounts.google.com/gsi/`，`style-src` 加入 `https://accounts.google.com/gsi/style`。tf CLI 网页导入在 `connect-src` 中只允许 `http://127.0.0.1:43110` 到 `43119` 十个精确 Origin；代码默认策略、旧自定义策略增强和 `deploy/config.example.yaml` 必须同步，不能扩大为端口或局域网通配符。完整边界见 [tf CLI 网页导入](tf_cli_web_import.md)。
 
 SMTP 的测试连接与实际发送共用同一建连路径和超时。`smtp_use_tls=true` 先按隐式 TLS 连接；仅当服务端以明文 SMTP 问候响应时改用强制 STARTTLS，服务端不支持升级时直接失败，不能明文发送认证。`smtp_use_tls=false` 保留机会式 STARTTLS，并在服务端不提供扩展时允许现有明文语义。两条路径都在认证成功后忽略非标准 QUIT 响应，因此后台连接测试与实际发信能力保持一致。
 
diff --git a/docs/interfaces/index.md b/docs/interfaces/index.md
index 0ea0181fb31a..da732dc59351 100644
--- a/docs/interfaces/index.md
+++ b/docs/interfaces/index.md
@@ -10,6 +10,7 @@
 
 - [HTTP 接口边界](http_api.md)：公共、用户、管理员、支付和网关路由族及认证/错误边界。读取时机：新增或移动路由、调整中间件、认证方式或公共响应语义时读取。
 - [配置边界](configuration.md)：默认值、YAML、环境变量、数据库运行时设置和首次初始化之间的边界。读取时机：新增配置项、修改加载优先级、设置页面或部署变量时读取。
+- [tf CLI 网页导入](tf_cli_web_import.md)：Keys 页、本机回环协议、会话证明、双重确认和浏览器安全头。读取时机：修改 Keys 导入入口、URL fragment、localhost fetch、CSP 或 tf-cli 协议时读取。
 - [上游账号能力矩阵](upstream_account_matrix.md)：九个平台、七类账号和全部公开网关协议的正式支持、兼容保留与不支持边界。读取时机：新增平台/账号类型、修改创建导入校验、路由分派或能力承诺时读取。
 - [API Key 上游用量查询](upstream_usage.md)：API Key 账号的适配器、管理员查询接口、归一化结果和浏览器缓存边界。读取时机：修改 API Key 用量查询、适配器协议、账号用量展示或查询安全策略时读取。
 - [Anthropic 上游](anthropic_upstream.md)：OAuth、Setup Token、API Key、Bedrock、Vertex，以及 Messages/OpenAI 兼容转换和缓存/限流契约。读取时机：修改 Anthropic 认证、协议、beta、thinking、缓存或错误分类时读取。
diff --git a/docs/interfaces/tf_cli_web_import.md b/docs/interfaces/tf_cli_web_import.md
new file mode 100644
index 000000000000..9a207ac77719
--- /dev/null
+++ b/docs/interfaces/tf_cli_web_import.md
@@ -0,0 +1,53 @@
+# tf CLI 网页导入
+
+本文只记录 TokenRouter 对 [tf-cli 网页导入协议](https://github.com/TokenFlux/tf-cli/blob/main/docs/integrations/web-import.md) 的接入责任。端口、字段、错误码和签名格式以上游文档为准。
+
+TokenRouter 后端不接收导入请求，也不新增授权接口。Keys 页把当前用户已加载到内存的 API Key 直接发给本机 `tf`；Key 不进入 URL、浏览器持久化、日志或分析事件。
+
+<a id="session_fragment"></a>
+## 会话片段
+
+`tf login --from-web` 打开 `/keys#tf=1.<port>.<base64url-secret>`。`frontend/src/router/index.ts` 在 Router 创建和登录守卫运行前调用 `initializeTfCliImportSession()`：
+
+- 任何 `#tf=` fragment 都立即通过 `history.replaceState` 删除，畸形值也删除。
+- 只接受 Keys 路径、`43110` 至 `43119` 端口和 16 字节规范无 padding base64url secret。
+- session 只在模块内存保留十分钟；过期、终端取消或请求被终端接受后清零。
+- 同一 SPA 登录跳转可继续使用 session；刷新和外部认证整页跳转会丢失证明，之后只能走未验证兼容路径。
+
+<a id="session_proof"></a>
+## 回环协议
+
+页面只访问 `http://127.0.0.1:43110` 至 `43119`。发现使用 `GET /ping`；有 session 时携带随机 challenge，并用 Web Crypto 校验 tf 返回的 HMAC。导入使用 `POST /import`，只在发现证明有效时发送 `X-TF-Session-Proof`。
+
+页面只称“已验证当前 tf 会话”。proof 不验证网页、API Key、本机程序来源或后续网关结果，也不提供 freshness 或防重放。没有 session、proof 不匹配或 Web Crypto 不可用时仍可导入，但发送前必须显示未验证警告。若已验证后导入 proof 过期或计算失败，本次不发送 Key；页面先降级为未验证状态，再要求用户确认。
+
+回环 fetch 固定使用 CORS、`credentials: omit`、`cache: no-store`、`redirect: error`、`referrerPolicy: no-referrer` 和 `targetAddressSpace: loopback`。发现总预算为 30 秒。浏览器自动完成 `OPTIONS` 预检，前端不手动发送。
+
+## 字段映射
+
+- `host` 使用页面 Origin。tf 校验同源后会恢复 CLI 自己的完整服务地址。
+- `key_name` 取 Keys 页名称。tf 会保存该来源元数据；未显式指定本地名称时，合法值还会成为终端命名候选。
+- 普通 Key 发送其 `group_id` 和 `group_name`。
+- 复合 Key 不发送单一分组元数据；实际能力由 tf 查询模型目录识别。
+
+HTTP `202 Accepted` 只表示终端已确认。tf 之后才校验网关，并在未显式指定名称时让用户选择自动识别、网页名称或自订名称；页面只能提示最终结果以终端为准，不能显示“导入成功”或“Key 已保存”。
+
+<a id="user_confirmation"></a>
+## 页面交互
+
+Keys 行的更多菜单提供“导入 TF CLI”，不增加第二套入口或 Key 选择状态。弹窗先发现服务，再显示已验证状态或未验证警告；用户点击“发送到 TF CLI”后才发送 Key。POST 等待期间提示用户在终端核对来源并确认。网页确认决定是否发送 Key，终端确认决定 tf 是否继续处理，两者不能互相替代。
+
+<a id="browser_security_headers"></a>
+## 浏览器安全头
+
+默认 CSP、旧自定义 CSP 的运行时补全和 `deploy/config.example.yaml` 都在 `connect-src` 中精确列出十个回环 Origin。不得扩大为端口通配符、`localhost` 或局域网地址。
+
+TokenRouter 默认不限制 `local-network-access`。若反向代理自行设置 `Permissions-Policy`，必须允许顶层页面访问本地网络。现代 Chromium 首次访问可能请求本地网络权限；拒绝时页面显示未找到本机会话并允许重试。
+
+## 验证
+
+- `tfCliImport.spec.ts`：fragment、过期、固定 HMAC 向量、验证降级、请求选项和 proof。
+- `TfCliImportDialog.spec.ts`、`KeysView.spec.ts`、`KeyActionMenu.spec.ts`：发送确认、状态文案、字段映射和菜单入口。
+- `security_headers_test.go`：十个精确 CSP Origin 及默认策略同步。
+
+相关文档：[接口目录](index.md)、[配置边界](configuration.md)、[复合 API Key](../domains/composite_api_keys.md)。
diff --git a/frontend/src/components/keys/KeyActionMenu.vue b/frontend/src/components/keys/KeyActionMenu.vue
index 3174fe8be103..061dade85b1c 100644
--- a/frontend/src/components/keys/KeyActionMenu.vue
+++ b/frontend/src/components/keys/KeyActionMenu.vue
@@ -1,23 +1,30 @@
 <template>
   <Teleport to="body">
     <div v-if="show && apiKey && position">
-      <div class="fixed inset-0 z-[9998]" @click="emit('close')"></div>
+      <div class="fixed inset-0 z-[9998]" aria-hidden="true" @click="emit('close')"></div>
       <div
+        :id="`key-action-menu-${apiKey.id}`"
         class="fixed z-[9999] w-48 overflow-hidden rounded-control bg-white shadow-lg ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
         :style="{ top: `${position.top}px`, left: `${position.left}px` }"
+        role="menu"
+        :aria-label="t('common.actions')"
         @click.stop
       >
         <div class="py-1">
-          <button type="button" class="menu-item" @click="emitAction('use')">
+          <button type="button" class="menu-item" role="menuitem" @click="emitAction('use')">
             <Icon name="terminal" size="sm" class="text-gray-400" :stroke-width="2" />
             {{ t('keys.useKey') }}
           </button>
-          <button v-if="allowImport" type="button" class="menu-item" @click="emitAction('import')">
+          <button type="button" class="menu-item" role="menuitem" @click="emitAction('import-tf')">
+            <Icon name="upload" size="sm" class="text-blue-500" :stroke-width="2" />
+            {{ t('keys.importToTf') }}
+          </button>
+          <button v-if="allowImport" type="button" class="menu-item" role="menuitem" @click="emitAction('import')">
             <Icon name="upload" size="sm" class="text-blue-500" :stroke-width="2" />
             {{ t('keys.importToCcSwitch') }}
           </button>
           <div class="my-1 border-t border-gray-100 dark:border-dark-700"></div>
-          <button type="button" class="menu-item text-red-600 dark:text-red-400" @click="emitAction('delete')">
+          <button type="button" class="menu-item text-red-600 dark:text-red-400" role="menuitem" @click="emitAction('delete')">
             <Icon name="trash" size="sm" :stroke-width="2" />
             {{ t('common.delete') }}
           </button>
@@ -43,6 +50,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   (event: 'close'): void
   (event: 'use', apiKey: ApiKey): void
+  (event: 'import-tf', apiKey: ApiKey): void
   (event: 'import', apiKey: ApiKey): void
   (event: 'delete', apiKey: ApiKey): void
 }>()
@@ -50,9 +58,10 @@ const emit = defineEmits<{
 const { t } = useI18n()
 
 // 菜单动作先传递当前 Key，再关闭浮层，确保后续弹窗不被透明遮罩拦截。
-const emitAction = (event: 'use' | 'import' | 'delete') => {
+const emitAction = (event: 'use' | 'import-tf' | 'import' | 'delete') => {
   if (!props.apiKey) return
   if (event === 'use') emit('use', props.apiKey)
+  else if (event === 'import-tf') emit('import-tf', props.apiKey)
   else if (event === 'import') emit('import', props.apiKey)
   else emit('delete', props.apiKey)
   emit('close')
diff --git a/frontend/src/components/keys/TfCliImportDialog.vue b/frontend/src/components/keys/TfCliImportDialog.vue
new file mode 100644
index 000000000000..3cc48d4ffe36
--- /dev/null
+++ b/frontend/src/components/keys/TfCliImportDialog.vue
@@ -0,0 +1,331 @@
+<template>
+  <!-- @project-doc docs/interfaces/tf_cli_web_import.md#user_confirmation -->
+  <BaseDialog
+    :show="show"
+    :title="t('keys.tfImport.title')"
+    width="narrow"
+    @close="requestClose"
+  >
+    <div class="min-w-0 space-y-5" data-test="tf-cli-import-dialog">
+      <div class="flex min-w-0 items-center gap-3 border-b border-gray-100 pb-4 dark:border-dark-700">
+        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-control bg-gray-100 text-gray-700 dark:bg-dark-700 dark:text-dark-200">
+          <Icon name="terminal" size="md" />
+        </div>
+        <div class="min-w-0">
+          <p class="truncate text-sm font-medium text-gray-900 dark:text-white">
+            {{ keyLabel }}
+          </p>
+          <p class="truncate text-xs text-gray-500 dark:text-dark-400">
+            {{ pageOrigin }}
+          </p>
+        </div>
+      </div>
+
+      <div
+        v-if="phase === 'discovering'"
+        class="flex min-h-36 flex-col items-center justify-center gap-3 py-4 text-center"
+        role="status"
+      >
+        <Icon name="refresh" size="lg" class="animate-spin text-primary-500" />
+        <div>
+          <p class="text-sm font-medium text-gray-900 dark:text-white">
+            {{ t('keys.tfImport.discoveringTitle') }}
+          </p>
+          <p class="mt-1 text-xs text-gray-500 dark:text-dark-400">
+            {{ t('keys.tfImport.discoveringDescription') }}
+          </p>
+        </div>
+      </div>
+
+      <template v-else-if="phase === 'ready' && target">
+        <div
+          v-if="target.verified"
+          class="flex gap-3 rounded-control border border-emerald-200 bg-emerald-50 p-3 text-emerald-800 dark:border-emerald-800/60 dark:bg-emerald-950/30 dark:text-emerald-300"
+          data-test="tf-cli-verified"
+          role="status"
+        >
+          <Icon name="shield" size="md" class="mt-0.5 shrink-0" />
+          <div class="min-w-0">
+            <p class="text-sm font-medium">{{ t('keys.tfImport.verifiedTitle') }}</p>
+            <p class="mt-1 text-xs leading-5">{{ t('keys.tfImport.verifiedDescription') }}</p>
+          </div>
+        </div>
+        <div
+          v-else
+          class="flex gap-3 rounded-control border border-amber-200 bg-amber-50 p-3 text-amber-900 dark:border-amber-700/60 dark:bg-amber-950/30 dark:text-amber-200"
+          data-test="tf-cli-unverified"
+          role="alert"
+        >
+          <Icon name="exclamationTriangle" size="md" class="mt-0.5 shrink-0" />
+          <div class="min-w-0">
+            <p class="text-sm font-medium">{{ t('keys.tfImport.unverifiedTitle') }}</p>
+            <p class="mt-1 text-xs leading-5">{{ t('keys.tfImport.unverifiedDescription') }}</p>
+          </div>
+        </div>
+
+        <dl class="divide-y divide-gray-100 border-y border-gray-100 text-sm dark:divide-dark-700 dark:border-dark-700">
+          <div class="flex min-w-0 items-center justify-between gap-4 py-3">
+            <dt class="shrink-0 text-gray-500 dark:text-dark-400">{{ t('keys.tfImport.destination') }}</dt>
+            <dd class="truncate font-mono text-xs text-gray-900 dark:text-dark-100">
+              127.0.0.1:{{ target.port }}
+            </dd>
+          </div>
+          <div v-if="groupLabel" class="flex min-w-0 items-center justify-between gap-4 py-3">
+            <dt class="shrink-0 text-gray-500 dark:text-dark-400">{{ t('keys.tfImport.group') }}</dt>
+            <dd class="truncate text-gray-900 dark:text-dark-100">{{ groupLabel }}</dd>
+          </div>
+        </dl>
+
+        <p class="text-xs leading-5 text-gray-500 dark:text-dark-400">
+          {{ t('keys.tfImport.confirmDescription') }}
+        </p>
+      </template>
+
+      <div
+        v-else-if="phase === 'sending'"
+        class="flex min-h-36 flex-col items-center justify-center gap-3 py-4 text-center"
+        role="status"
+      >
+        <Icon name="terminal" size="lg" class="text-primary-500" />
+        <div>
+          <p class="text-sm font-medium text-gray-900 dark:text-white">
+            {{ t('keys.tfImport.waitingTitle') }}
+          </p>
+          <p class="mt-1 max-w-sm text-xs leading-5 text-gray-500 dark:text-dark-400">
+            {{ t('keys.tfImport.waitingDescription') }}
+          </p>
+        </div>
+      </div>
+
+      <div
+        v-else-if="phase === 'accepted'"
+        class="flex gap-3 rounded-control border border-emerald-200 bg-emerald-50 p-4 text-emerald-800 dark:border-emerald-800/60 dark:bg-emerald-950/30 dark:text-emerald-300"
+        data-test="tf-cli-accepted"
+        role="status"
+      >
+        <Icon name="checkCircle" size="lg" class="shrink-0" />
+        <div class="min-w-0">
+          <p class="text-sm font-medium">{{ t('keys.tfImport.acceptedTitle') }}</p>
+          <p class="mt-1 text-xs leading-5">{{ t('keys.tfImport.acceptedDescription') }}</p>
+        </div>
+      </div>
+
+      <div
+        v-else-if="phase === 'notFound'"
+        class="flex gap-3 rounded-control border border-gray-200 bg-gray-50 p-4 text-gray-700 dark:border-dark-700 dark:bg-dark-800 dark:text-dark-200"
+        data-test="tf-cli-not-found"
+        role="alert"
+      >
+        <Icon name="xCircle" size="lg" class="shrink-0 text-gray-500 dark:text-dark-400" />
+        <div class="min-w-0">
+          <p class="text-sm font-medium">{{ t('keys.tfImport.notFoundTitle') }}</p>
+          <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-dark-400">
+            {{ t('keys.tfImport.notFoundDescription') }}
+          </p>
+        </div>
+      </div>
+
+      <div
+        v-else-if="phase === 'error'"
+        class="flex gap-3 rounded-control border border-red-200 bg-red-50 p-4 text-red-800 dark:border-red-800/60 dark:bg-red-950/30 dark:text-red-300"
+        data-test="tf-cli-import-error"
+        role="alert"
+      >
+        <Icon name="exclamationCircle" size="lg" class="shrink-0" />
+        <div class="min-w-0">
+          <p class="text-sm font-medium">{{ t('keys.tfImport.errorTitle') }}</p>
+          <p class="mt-1 text-xs leading-5">{{ importErrorMessage }}</p>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <template v-if="phase === 'ready'">
+        <button type="button" class="btn btn-secondary" @click="requestClose">
+          {{ t('common.cancel') }}
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary inline-flex items-center gap-2"
+          data-test="tf-cli-send"
+          @click="sendKey"
+        >
+          <Icon name="upload" size="sm" />
+          {{ t('keys.tfImport.send') }}
+        </button>
+      </template>
+      <template v-else-if="phase === 'discovering'">
+        <button type="button" class="btn btn-secondary" @click="requestClose">
+          {{ t('common.cancel') }}
+        </button>
+      </template>
+      <template v-else-if="phase === 'sending'">
+        <button type="button" class="btn btn-primary inline-flex cursor-wait items-center gap-2" disabled>
+          <Icon name="refresh" size="sm" class="animate-spin" />
+          {{ t('keys.tfImport.waiting') }}
+        </button>
+      </template>
+      <template v-else-if="phase === 'accepted'">
+        <button type="button" class="btn btn-primary" @click="requestClose">
+          {{ t('common.close') }}
+        </button>
+      </template>
+      <template v-else>
+        <button type="button" class="btn btn-secondary" @click="requestClose">
+          {{ t('common.close') }}
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary inline-flex items-center gap-2"
+          data-test="tf-cli-retry"
+          @click="startDiscovery"
+        >
+          <Icon name="refresh" size="sm" />
+          {{ t('keys.tfImport.retry') }}
+        </button>
+      </template>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+import Icon from '@/components/icons/Icon.vue'
+import type { ApiKey } from '@/types'
+import {
+  findTfCli,
+  importKeyToTf,
+  type TfCliTarget,
+} from '@/utils/tfCliImport'
+
+type Phase = 'discovering' | 'ready' | 'sending' | 'accepted' | 'notFound' | 'error'
+
+interface Props {
+  show: boolean
+  apiKey: ApiKey | null
+}
+
+interface Emits {
+  (event: 'close'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+const { t } = useI18n()
+const pageOrigin = window.location.origin
+
+const phase = ref<Phase>('discovering')
+const target = shallowRef<TfCliTarget | null>(null)
+const importError = ref('')
+let operationController: AbortController | null = null
+
+const keyLabel = computed(() => props.apiKey?.name || `#${props.apiKey?.id ?? ''}`)
+const groupLabel = computed(() => {
+  const key = props.apiKey
+  if (!key || key.is_composite || key.group_id == null) return ''
+  return key.group?.name || String(key.group_id)
+})
+
+const importErrorMessage = computed(() => {
+  switch (importError.value) {
+    case 'rejected':
+      return t('keys.tfImport.errors.rejected')
+    case 'cancelled':
+      return t('keys.tfImport.errors.cancelled')
+    case 'busy':
+      return t('keys.tfImport.errors.busy')
+    case 'origin_not_allowed':
+    case 'host_mismatch':
+      return t('keys.tfImport.errors.originNotAllowed')
+    case 'invalid_key':
+    case 'invalid_metadata':
+    case 'invalid_json':
+    case 'content_type':
+      return t('keys.tfImport.errors.invalidPayload')
+    case 'unsupported_protocol':
+      return t('keys.tfImport.errors.unsupportedVersion')
+    case 'network_error':
+      return t('keys.tfImport.errors.network')
+    default:
+      return t('keys.tfImport.errors.unexpected')
+  }
+})
+
+function cancelOperation(): void {
+  operationController?.abort()
+  operationController = null
+}
+
+async function startDiscovery(): Promise<void> {
+  if (!props.show || !props.apiKey) return
+
+  cancelOperation()
+  const controller = new AbortController()
+  operationController = controller
+  phase.value = 'discovering'
+  target.value = null
+  importError.value = ''
+
+  const discovered = await findTfCli(controller.signal)
+  if (controller.signal.aborted || operationController !== controller || !props.show) return
+
+  operationController = null
+  target.value = discovered
+  phase.value = discovered ? 'ready' : 'notFound'
+}
+
+async function sendKey(): Promise<void> {
+  const key = props.apiKey
+  const destination = target.value
+  if (!key || !destination || phase.value !== 'ready') return
+
+  cancelOperation()
+  const controller = new AbortController()
+  operationController = controller
+  phase.value = 'sending'
+
+  const payload = {
+    key: key.key,
+    host: pageOrigin,
+    key_name: key.name,
+    ...(!key.is_composite && key.group_id != null
+      ? { group_id: key.group_id, group_name: key.group?.name }
+      : {}),
+  }
+  const result = await importKeyToTf(destination, payload, controller.signal)
+  if (controller.signal.aborted || operationController !== controller || !props.show) return
+
+  operationController = null
+  if (result.ok) {
+    phase.value = 'accepted'
+    return
+  }
+
+  if (result.error === 'session_expired' || result.error === 'session_proof_unavailable') {
+    target.value = { ...destination, verified: false }
+    phase.value = 'ready'
+    return
+  }
+
+  importError.value = result.error
+  phase.value = 'error'
+}
+
+function requestClose(): void {
+  cancelOperation()
+  emit('close')
+}
+
+watch(
+  () => [props.show, props.apiKey?.id] as const,
+  ([show]) => {
+    if (show) void startDiscovery()
+    else cancelOperation()
+  },
+  { immediate: true },
+)
+
+onUnmounted(cancelOperation)
+</script>
diff --git a/frontend/src/components/keys/__tests__/KeyActionMenu.spec.ts b/frontend/src/components/keys/__tests__/KeyActionMenu.spec.ts
index 6d2280d8bd67..d93b696be628 100644
--- a/frontend/src/components/keys/__tests__/KeyActionMenu.spec.ts
+++ b/frontend/src/components/keys/__tests__/KeyActionMenu.spec.ts
@@ -47,7 +47,7 @@ describe('KeyActionMenu', () => {
     document.body.innerHTML = ''
   })
 
-  it('将使用、导入和删除收纳到更多菜单', async () => {
+  it('将使用、tf/CCS 导入和删除收纳到更多菜单', async () => {
     const wrapper = mount(KeyActionMenu, {
       props: {
         show: true,
@@ -58,17 +58,35 @@ describe('KeyActionMenu', () => {
       attachTo: document.body,
     })
 
+    const menu = document.body.querySelector('[role="menu"]')
+    expect(menu?.id).toBe('key-action-menu-7')
+    expect(menu?.querySelectorAll('[role="menuitem"]')).toHaveLength(4)
     expect(document.body.textContent).toContain('keys.useKey')
+    expect(document.body.textContent).toContain('keys.importToTf')
     expect(document.body.textContent).toContain('keys.importToCcSwitch')
     expect(document.body.textContent).toContain('common.delete')
 
+    const tfButton = Array.from(document.body.querySelectorAll('button'))
+      .find((button) => button.textContent?.includes('keys.importToTf'))
+    const ccsButton = Array.from(document.body.querySelectorAll('button'))
+      .find((button) => button.textContent?.includes('keys.importToCcSwitch'))
+    expect(tfButton?.querySelector('path')?.getAttribute('d'))
+      .toBe(ccsButton?.querySelector('path')?.getAttribute('d'))
+    expect(tfButton?.querySelector('svg')?.classList.contains('text-blue-500')).toBe(true)
+    tfButton?.click()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('import-tf')?.[0]).toEqual([apiKey])
+    expect(wrapper.emitted('close')).toHaveLength(1)
+
+    await wrapper.setProps({ show: true })
     const deleteButton = Array.from(document.body.querySelectorAll('button'))
       .find((button) => button.textContent?.includes('common.delete'))
     deleteButton?.click()
     await wrapper.vm.$nextTick()
 
     expect(wrapper.emitted('delete')?.[0]).toEqual([apiKey])
-    expect(wrapper.emitted('close')).toHaveLength(1)
+    expect(wrapper.emitted('close')).toHaveLength(2)
     wrapper.unmount()
   })
 
@@ -84,6 +102,7 @@ describe('KeyActionMenu', () => {
     })
 
     expect(document.body.textContent).not.toContain('keys.importToCcSwitch')
+    expect(document.body.textContent).toContain('keys.importToTf')
     wrapper.unmount()
   })
 })
diff --git a/frontend/src/components/keys/__tests__/TfCliImportDialog.spec.ts b/frontend/src/components/keys/__tests__/TfCliImportDialog.spec.ts
new file mode 100644
index 000000000000..2f7d133ebf94
--- /dev/null
+++ b/frontend/src/components/keys/__tests__/TfCliImportDialog.spec.ts
@@ -0,0 +1,179 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { ApiKey } from '@/types'
+import TfCliImportDialog from '../TfCliImportDialog.vue'
+
+const protocol = vi.hoisted(() => ({
+  findTfCli: vi.fn(),
+  importKeyToTf: vi.fn(),
+}))
+
+vi.mock('@/utils/tfCliImport', () => protocol)
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+const apiKey = {
+  id: 7,
+  key: 'sk-secret',
+  name: 'Laptop',
+  group_id: 12,
+  group: { id: 12, name: 'GPT' },
+  is_composite: false,
+} as ApiKey
+
+function mountDialog(key: ApiKey = apiKey) {
+  return mount(TfCliImportDialog, {
+    props: {
+      show: true,
+      apiKey: key,
+    },
+    global: {
+      stubs: {
+        BaseDialog: {
+          props: ['show', 'title', 'width'],
+          emits: ['close'],
+          template: `
+            <div v-if="show" data-test="base-dialog">
+              <button data-test="base-close" @click="$emit('close')">close</button>
+              <slot />
+              <slot name="footer" />
+            </div>
+          `,
+        },
+        Icon: { template: '<span />' },
+      },
+    },
+  })
+}
+
+describe('TfCliImportDialog', () => {
+  beforeEach(() => {
+    protocol.findTfCli.mockReset()
+    protocol.importKeyToTf.mockReset()
+  })
+
+  it('requires a second click before sending to a verified tf session', async () => {
+    protocol.findTfCli.mockResolvedValue({ port: 43110, verified: true })
+    protocol.importKeyToTf.mockResolvedValue({ ok: true, status: 202 })
+    const wrapper = mountDialog()
+    await flushPromises()
+
+    expect(wrapper.find('[data-test="tf-cli-verified"]').exists()).toBe(true)
+    expect(protocol.importKeyToTf).not.toHaveBeenCalled()
+
+    await wrapper.get('[data-test="tf-cli-send"]').trigger('click')
+    await flushPromises()
+
+    expect(protocol.importKeyToTf).toHaveBeenCalledWith(
+      { port: 43110, verified: true },
+      {
+        key: 'sk-secret',
+        host: window.location.origin,
+        key_name: 'Laptop',
+        group_id: 12,
+        group_name: 'GPT',
+      },
+      expect.any(AbortSignal),
+    )
+    expect(wrapper.find('[data-test="tf-cli-accepted"]').exists()).toBe(true)
+  })
+
+  it('requires another click after a verified proof becomes unavailable', async () => {
+    protocol.findTfCli.mockResolvedValue({ port: 43110, verified: true })
+    protocol.importKeyToTf
+      .mockResolvedValueOnce({ ok: false, error: 'session_proof_unavailable' })
+      .mockResolvedValueOnce({ ok: true, status: 202 })
+    const wrapper = mountDialog()
+    await flushPromises()
+
+    await wrapper.get('[data-test="tf-cli-send"]').trigger('click')
+    await flushPromises()
+
+    expect(protocol.importKeyToTf).toHaveBeenCalledTimes(1)
+    expect(wrapper.find('[data-test="tf-cli-unverified"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="tf-cli-accepted"]').exists()).toBe(false)
+
+    await wrapper.get('[data-test="tf-cli-send"]').trigger('click')
+    await flushPromises()
+
+    expect(protocol.importKeyToTf).toHaveBeenCalledTimes(2)
+    expect(protocol.importKeyToTf.mock.calls[1]?.[0]).toEqual({ port: 43110, verified: false })
+    expect(wrapper.find('[data-test="tf-cli-accepted"]').exists()).toBe(true)
+  })
+
+  it('shows a blocking visual warning but permits the unverified compatibility path', async () => {
+    protocol.findTfCli.mockResolvedValue({ port: 43114, verified: false })
+    protocol.importKeyToTf.mockResolvedValue({ ok: false, status: 409, error: 'rejected' })
+    const wrapper = mountDialog()
+    await flushPromises()
+
+    expect(wrapper.find('[data-test="tf-cli-unverified"]').exists()).toBe(true)
+    expect(wrapper.get('[data-test="tf-cli-send"]').attributes('disabled')).toBeUndefined()
+
+    await wrapper.get('[data-test="tf-cli-send"]').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.find('[data-test="tf-cli-import-error"]').exists()).toBe(true)
+    expect(wrapper.text()).toContain('keys.tfImport.errors.rejected')
+  })
+
+  it('omits misleading single-group metadata for a composite key', async () => {
+    protocol.findTfCli.mockResolvedValue({ port: 43111, verified: true })
+    protocol.importKeyToTf.mockResolvedValue({ ok: true, status: 202 })
+    const composite = {
+      ...apiKey,
+      id: 8,
+      is_composite: true,
+      composite_groups: [
+        { group_id: 12, prefix: 'GPT' },
+        { group_id: 13, prefix: 'CLAUDE' },
+      ],
+    } as ApiKey
+    const wrapper = mountDialog(composite)
+    await flushPromises()
+
+    await wrapper.get('[data-test="tf-cli-send"]').trigger('click')
+    await flushPromises()
+
+    expect(protocol.importKeyToTf.mock.calls[0]?.[1]).toEqual({
+      key: 'sk-secret',
+      host: window.location.origin,
+      key_name: 'Laptop',
+    })
+  })
+
+  it('offers retry when no local tf service is found', async () => {
+    protocol.findTfCli.mockResolvedValueOnce(null).mockResolvedValueOnce({
+      port: 43112,
+      verified: false,
+    })
+    const wrapper = mountDialog()
+    await flushPromises()
+
+    expect(wrapper.find('[data-test="tf-cli-not-found"]').exists()).toBe(true)
+    await wrapper.get('[data-test="tf-cli-retry"]').trigger('click')
+    await flushPromises()
+
+    expect(protocol.findTfCli).toHaveBeenCalledTimes(2)
+    expect(wrapper.find('[data-test="tf-cli-unverified"]').exists()).toBe(true)
+  })
+
+  it('aborts the browser wait when dismissed during terminal confirmation', async () => {
+    let finishImport: ((value: { ok: true; status: 202 }) => void) | undefined
+    protocol.findTfCli.mockResolvedValue({ port: 43110, verified: true })
+    protocol.importKeyToTf.mockReturnValue(new Promise((resolve) => { finishImport = resolve }))
+    const wrapper = mountDialog()
+    await flushPromises()
+
+    await wrapper.get('[data-test="tf-cli-send"]').trigger('click')
+    const requestSignal = protocol.importKeyToTf.mock.calls[0]?.[2] as AbortSignal
+    await wrapper.get('[data-test="base-close"]').trigger('click')
+
+    expect(wrapper.emitted('close')).toHaveLength(1)
+    expect(requestSignal.aborted).toBe(true)
+    finishImport?.({ ok: true, status: 202 })
+    await flushPromises()
+  })
+})
diff --git a/frontend/src/i18n/locales/en/dashboard.ts b/frontend/src/i18n/locales/en/dashboard.ts
index 5f1bc41a9b01..7aea6c336137 100644
--- a/frontend/src/i18n/locales/en/dashboard.ts
+++ b/frontend/src/i18n/locales/en/dashboard.ts
@@ -100,6 +100,39 @@ export default {
     copyToClipboard: 'Copy to clipboard',
     copied: 'Copied!',
     importToCcSwitch: 'Import to CCS',
+    importToTf: 'Import to TF CLI',
+    tfImport: {
+      title: 'Import to TF CLI',
+      discoveringTitle: 'Looking for local tf',
+      discoveringDescription: 'Your browser may request local network access.',
+      verifiedTitle: 'Verified current tf session',
+      verifiedDescription: 'The session proof matches the terminal link. This does not verify the page, API key, or subsequent gateway result.',
+      unverifiedTitle: 'Local tf session not verified',
+      unverifiedDescription: 'This local service could not be verified against the current terminal link. Continuing sends the API key to that service.',
+      destination: 'Local destination',
+      group: 'Source group',
+      confirmDescription: 'The terminal must still approve the request before tf validates and saves the key.',
+      send: 'Send to TF CLI',
+      waiting: 'Waiting for terminal',
+      waitingTitle: 'Waiting for terminal confirmation',
+      waitingDescription: 'Review the key source and confirm in the terminal running tf. Closing this window stops web waiting; check the terminal for further status.',
+      acceptedTitle: 'Request accepted by terminal',
+      acceptedDescription: 'Return to the terminal to complete remaining steps. The final result will be shown in the terminal.',
+      notFoundTitle: 'No local tf session found',
+      notFoundDescription: 'Run tf login --from-web in a terminal, allow local network access in the browser, then retry.',
+      errorTitle: 'Import request did not complete',
+      retry: 'Retry',
+      errors: {
+        rejected: 'The terminal rejected this request. tf is still waiting for another import request.',
+        cancelled: 'The tf session was cancelled or closed in the terminal.',
+        busy: 'tf is handling another import request. Try again shortly.',
+        originNotAllowed: 'This page origin does not match the service address configured in tf.',
+        invalidPayload: 'tf could not read the import data for this key.',
+        unsupportedVersion: 'The local tf version does not support this web import protocol. Update tf and try again.',
+        network: 'The connection to local tf was interrupted. Check that the session is still running.',
+        unexpected: 'Local tf returned an unrecognized response.'
+      }
+    },
     enable: 'Enable',
     disable: 'Disable',
     nameLabel: 'Name',
diff --git a/frontend/src/i18n/locales/zh/dashboard.ts b/frontend/src/i18n/locales/zh/dashboard.ts
index ab1f5c3343e9..72bb2e6c5271 100644
--- a/frontend/src/i18n/locales/zh/dashboard.ts
+++ b/frontend/src/i18n/locales/zh/dashboard.ts
@@ -100,6 +100,39 @@ export default {
     copyToClipboard: '复制到剪贴板',
     copied: '已复制！',
     importToCcSwitch: '导入到 CCS',
+    importToTf: '导入 TF CLI',
+    tfImport: {
+      title: '导入 TF CLI',
+      discoveringTitle: '正在查找本机 tf',
+      discoveringDescription: '浏览器可能会请求本地网络访问权限。',
+      verifiedTitle: '已验证当前 tf 会话',
+      verifiedDescription: '会话证明与终端链接一致。此状态不验证网页、API Key 或后续网关结果。',
+      unverifiedTitle: '未验证本机 tf 会话',
+      unverifiedDescription: '无法验证此本机服务是否来自当前终端链接。继续会将 API Key 发送给该服务。',
+      destination: '本机目标',
+      group: '来源分组',
+      confirmDescription: '发送后仍需在终端确认；只有终端确认后 tf 才会继续校验并保存 Key。',
+      send: '发送到 TF CLI',
+      waiting: '等待终端',
+      waitingTitle: '等待终端确认',
+      waitingDescription: '请在运行 tf 的终端核对来源并确认。关闭窗口将停止网页等待，后续状态请查看终端。',
+      acceptedTitle: '终端已接受请求',
+      acceptedDescription: '请返回终端完成后续操作，最终结果以终端输出为准。',
+      notFoundTitle: '未找到本机 tf 会话',
+      notFoundDescription: '请先在终端运行 tf login --from-web，允许浏览器访问本地网络后重试。',
+      errorTitle: '导入请求未完成',
+      retry: '重试',
+      errors: {
+        rejected: '终端拒绝了此请求。tf 仍在等待新的导入请求。',
+        cancelled: 'tf 会话已在终端取消或关闭。',
+        busy: 'tf 正在处理另一个导入请求，请稍后重试。',
+        originNotAllowed: '此网页来源与 tf 当前配置的服务地址不一致。',
+        invalidPayload: 'tf 无法读取此 Key 的导入数据。',
+        unsupportedVersion: '本机 tf 不支持当前网页导入协议，请更新 tf。',
+        network: '与本机 tf 的连接已中断，请确认会话仍在运行。',
+        unexpected: '本机 tf 返回了无法识别的响应。'
+      }
+    },
     enable: '启用',
     disable: '禁用',
     nameLabel: '名称',
diff --git a/frontend/src/router/__tests__/tfCliImportSession.spec.ts b/frontend/src/router/__tests__/tfCliImportSession.spec.ts
new file mode 100644
index 000000000000..23864fce1e0f
--- /dev/null
+++ b/frontend/src/router/__tests__/tfCliImportSession.spec.ts
@@ -0,0 +1,68 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const authStore = vi.hoisted(() => ({
+  checkAuth: vi.fn(),
+  isAuthenticated: false,
+  isAdmin: false,
+  isSimpleMode: false,
+  hasPendingAuthSession: false,
+}))
+
+const appStore = vi.hoisted(() => ({
+  siteName: 'TokenRouter',
+  backendModeEnabled: false,
+  cachedPublicSettings: null as null | Record<string, unknown>,
+  publicSettingsLoaded: false,
+  fetchPublicSettings: vi.fn(),
+}))
+
+vi.mock('@/stores/auth', () => ({ useAuthStore: () => authStore }))
+vi.mock('@/stores/app', () => ({ useAppStore: () => appStore }))
+vi.mock('@/stores/adminSettings', () => ({
+  useAdminSettingsStore: () => ({ customMenuItems: [] }),
+}))
+vi.mock('@/composables/useNavigationLoading', () => ({
+  useNavigationLoadingState: () => ({
+    startNavigation: vi.fn(),
+    endNavigation: vi.fn(),
+    isLoading: { value: false },
+  }),
+}))
+vi.mock('@/composables/useRoutePrefetch', () => ({
+  useRoutePrefetch: () => ({
+    triggerPrefetch: vi.fn(),
+    cancelPendingPrefetch: vi.fn(),
+    resetPrefetchState: vi.fn(),
+  }),
+}))
+vi.mock('@/router/title', () => ({
+  resolveRouteDocumentTitle: () => 'TokenRouter',
+}))
+
+describe('router tf CLI session initialization', () => {
+  afterEach(async () => {
+    const { clearTfCliImportSession } = await import('@/utils/tfCliImport')
+    clearTfCliImportSession()
+    window.history.replaceState({}, '', '/')
+    vi.restoreAllMocks()
+  })
+
+  it('removes the secret before an unauthenticated redirect captures fullPath', async () => {
+    vi.spyOn(window, 'scrollTo').mockImplementation(() => {})
+    window.history.replaceState(
+      {},
+      '',
+      '/keys?scope=personal#tf=1.43110.AAECAwQFBgcICQoLDA0ODw',
+    )
+
+    const { default: router } = await import('@/router')
+    expect(window.location.hash).toBe('')
+
+    await router.push('/keys?scope=personal')
+    await router.isReady()
+
+    expect(router.currentRoute.value.path).toBe('/login')
+    expect(router.currentRoute.value.query.redirect).toBe('/keys?scope=personal')
+    expect(JSON.stringify(router.currentRoute.value.query)).not.toContain('AAECAwQFBgcICQoLDA0ODw')
+  })
+})
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 31b9f2a4160f..142fa46f2dac 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -12,6 +12,10 @@ import { useRoutePrefetch } from '@/composables/useRoutePrefetch'
 import { getSetupStatus } from '@/api/setup'
 import { resolveCompletedSetupRedirectPath } from './setupRedirect'
 import { resolveRouteDocumentTitle } from './title'
+import { initializeTfCliImportSession } from '@/utils/tfCliImport'
+
+// 登录守卫读取 fullPath 前先移除一次性会话 secret，避免它进入重定向参数。
+initializeTfCliImportSession()
 
 /**
  * Route definitions with lazy loading
diff --git a/frontend/src/utils/__tests__/tfCliImport.spec.ts b/frontend/src/utils/__tests__/tfCliImport.spec.ts
new file mode 100644
index 000000000000..f00d23104c1f
--- /dev/null
+++ b/frontend/src/utils/__tests__/tfCliImport.spec.ts
@@ -0,0 +1,281 @@
+import { Buffer } from 'node:buffer'
+import { webcrypto } from 'node:crypto'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import {
+  clearTfCliImportSession,
+  findTfCli,
+  importKeyToTf,
+  initializeTfCliImportSession,
+} from '../tfCliImport'
+
+const sessionSecret = 'AAECAwQFBgcICQoLDA0ODw'
+const deterministicChallenge = 'AAECAwQFBgcICQoLDA0ODxAR'
+const deterministicPingProof = 'CTCnT8q258NPygW9q6J1TMhisl3PBhbk7FCQ-YXgfEk'
+const deterministicImportProof = 'f5CZvZfgAVJoIiTFPt2SWirCyvzoKJvdK9qTdLRSbWU'
+
+function setURL(path: string): void {
+  window.history.replaceState({}, '', path)
+}
+
+function toNodeBuffer(source: BufferSource): Buffer {
+  const bytes = ArrayBuffer.isView(source)
+    ? new Uint8Array(source.buffer, source.byteOffset, source.byteLength)
+    : new Uint8Array(source)
+  return Buffer.from(Array.from(bytes))
+}
+
+function deterministicCrypto(): Crypto {
+  const subtle = {
+    importKey(
+      format: string,
+      keyData: BufferSource,
+      algorithm: AlgorithmIdentifier,
+      extractable: boolean,
+      keyUsages: KeyUsage[],
+    ) {
+      if (format !== 'raw') throw new Error(`Unexpected key format: ${format}`)
+      return webcrypto.subtle.importKey(
+        'raw',
+        toNodeBuffer(keyData),
+        algorithm as HmacImportParams,
+        extractable,
+        keyUsages,
+      )
+    },
+    sign(algorithm: AlgorithmIdentifier, key: CryptoKey, data: BufferSource) {
+      return webcrypto.subtle.sign(algorithm, key, toNodeBuffer(data))
+    },
+  } as unknown as SubtleCrypto
+
+  return {
+    subtle,
+    getRandomValues<T extends ArrayBufferView | null>(array: T): T {
+      if (!array) return array
+      const bytes = new Uint8Array(array.buffer, array.byteOffset, array.byteLength)
+      bytes.forEach((_, index) => { bytes[index] = index })
+      return array
+    },
+    randomUUID: webcrypto.randomUUID.bind(webcrypto),
+  } as Crypto
+}
+
+describe('tfCliImport session lifecycle', () => {
+  beforeEach(() => {
+    clearTfCliImportSession()
+    setURL('/keys')
+  })
+
+  afterEach(() => {
+    clearTfCliImportSession()
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+    vi.restoreAllMocks()
+  })
+
+  it('captures a canonical session fragment and removes it from the URL immediately', () => {
+    const storageSpy = vi.spyOn(Storage.prototype, 'setItem')
+    setURL(`/keys?tab=active#tf=1.43110.${sessionSecret}`)
+
+    expect(initializeTfCliImportSession()).toBe(true)
+    expect(window.location.pathname + window.location.search + window.location.hash).toBe('/keys?tab=active')
+    expect(storageSpy).not.toHaveBeenCalled()
+  })
+
+  it.each([
+    '#tf=2.43110.AAECAwQFBgcICQoLDA0ODw',
+    '#tf=1.43120.AAECAwQFBgcICQoLDA0ODw',
+    '#tf=1.43110.AAAAAAAAAAAAAAAAAAAAAB',
+    '#tf=malformed',
+  ])('clears malformed tf fragments without retaining a session: %s', (fragment) => {
+    setURL(`/keys${fragment}`)
+
+    expect(initializeTfCliImportSession()).toBe(false)
+    expect(window.location.hash).toBe('')
+  })
+
+  it('clears a tf fragment outside the Keys route without accepting it', () => {
+    setURL(`/login#tf=1.43110.${sessionSecret}`)
+
+    expect(initializeTfCliImportSession()).toBe(false)
+    expect(window.location.hash).toBe('')
+  })
+
+  it('expires an in-memory session after ten minutes', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-09-03T00:00:00Z'))
+    setURL(`/keys#tf=1.43110.${sessionSecret}`)
+    initializeTfCliImportSession()
+
+    vi.setSystemTime(new Date('2026-09-03T00:10:00Z'))
+
+    expect(initializeTfCliImportSession()).toBe(false)
+  })
+})
+
+describe('tfCliImport localhost protocol', () => {
+  beforeEach(() => {
+    clearTfCliImportSession()
+    setURL('/keys')
+    vi.stubGlobal('crypto', deterministicCrypto())
+  })
+
+  afterEach(() => {
+    clearTfCliImportSession()
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+    vi.restoreAllMocks()
+  })
+
+  it('verifies the linked tf session and signs the exact import body', async () => {
+    setURL(`/keys#tf=1.43110.${sessionSecret}`)
+    expect(initializeTfCliImportSession()).toBe(true)
+    const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+      const url = String(input)
+      if (url.includes('/ping')) {
+        expect(new URL(url).searchParams.get('challenge')).toBe(deterministicChallenge)
+        return new Response(JSON.stringify({
+          ok: true,
+          service: 'tf',
+          protocol: 1,
+          version: 'dev',
+          proof: deterministicPingProof,
+        }), { status: 200 })
+      }
+
+      expect(url).toBe('http://127.0.0.1:43110/import')
+      expect(init?.body).toBe('{"key":"sk-test","host":"https://tokenflux.dev","key_name":"laptop","version":1}')
+      expect((init?.headers as Record<string, string>)['X-TF-Session-Proof'])
+        .toBe(deterministicImportProof)
+      expect(init).toMatchObject({
+        method: 'POST',
+        mode: 'cors',
+        cache: 'no-store',
+        credentials: 'omit',
+        redirect: 'error',
+        referrerPolicy: 'no-referrer',
+        targetAddressSpace: 'loopback',
+      })
+      return new Response(JSON.stringify({ ok: true }), { status: 202 })
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    const target = await findTfCli()
+
+    expect(target).toEqual({ port: 43110, verified: true })
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    const pingInit = fetchMock.mock.calls[0]?.[1] as RequestInit & { targetAddressSpace?: string }
+    expect(pingInit).toMatchObject({
+      method: 'GET',
+      mode: 'cors',
+      cache: 'no-store',
+      credentials: 'omit',
+      redirect: 'error',
+      referrerPolicy: 'no-referrer',
+      targetAddressSpace: 'loopback',
+    })
+
+    const result = await importKeyToTf(target!, {
+      key: 'sk-test',
+      host: 'https://tokenflux.dev',
+      key_name: 'laptop',
+    })
+
+    expect(result).toEqual({ ok: true, status: 202 })
+    expect(initializeTfCliImportSession()).toBe(false)
+  })
+
+  it('does not send a key after the verified session proof expires', async () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-09-03T00:00:00Z'))
+    setURL(`/keys#tf=1.43110.${sessionSecret}`)
+    expect(initializeTfCliImportSession()).toBe(true)
+    const fetchMock = vi.fn().mockResolvedValue(new Response(JSON.stringify({
+      ok: true,
+      service: 'tf',
+      protocol: 1,
+      proof: deterministicPingProof,
+    }), { status: 200 }))
+    vi.stubGlobal('fetch', fetchMock)
+
+    const target = await findTfCli()
+    expect(target).toEqual({ port: 43110, verified: true })
+
+    await vi.advanceTimersByTimeAsync(10 * 60_000)
+    await expect(importKeyToTf(target!, {
+      key: 'sk-test',
+      host: 'https://tokenflux.dev',
+    })).resolves.toEqual({ ok: false, error: 'session_expired' })
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not send the key when import proof signing fails', async () => {
+    setURL(`/keys#tf=1.43110.${sessionSecret}`)
+    expect(initializeTfCliImportSession()).toBe(true)
+    const fetchMock = vi.fn().mockResolvedValue(new Response(JSON.stringify({
+      ok: true,
+      service: 'tf',
+      protocol: 1,
+      proof: deterministicPingProof,
+    }), { status: 200 }))
+    vi.stubGlobal('fetch', fetchMock)
+
+    const target = await findTfCli()
+    expect(target).toEqual({ port: 43110, verified: true })
+    vi.spyOn(webcrypto.subtle, 'sign').mockRejectedValueOnce(new Error('Web Crypto unavailable'))
+
+    await expect(importKeyToTf(target!, {
+      key: 'sk-test',
+      host: 'https://tokenflux.dev',
+    })).resolves.toEqual({ ok: false, error: 'session_proof_unavailable' })
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('keeps a responding linked service usable but unverified when its proof is wrong', async () => {
+    setURL(`/keys#tf=1.43110.${sessionSecret}`)
+    expect(initializeTfCliImportSession()).toBe(true)
+    const fetchMock = vi.fn().mockResolvedValue(new Response(JSON.stringify({
+      ok: true,
+      service: 'tf',
+      protocol: 1,
+      proof: 'wrong-proof',
+    }), { status: 200 }))
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(findTfCli()).resolves.toEqual({ port: 43110, verified: false })
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('discovers an unlinked tf service without sending a session proof', async () => {
+    const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+      const url = String(input)
+      if (url.endsWith(':43113/ping')) {
+        return new Response(JSON.stringify({ ok: true, service: 'tf', protocol: 1 }), { status: 200 })
+      }
+      if (url.endsWith(':43113/import')) {
+        expect((init?.headers as Record<string, string>)['X-TF-Session-Proof']).toBeUndefined()
+        return new Response(JSON.stringify({ ok: false, error: 'rejected' }), { status: 409 })
+      }
+      return new Response(JSON.stringify({ ok: false }), { status: 404 })
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    const target = await findTfCli()
+
+    expect(target).toEqual({ port: 43113, verified: false })
+    await expect(importKeyToTf(target!, {
+      key: 'sk-test',
+      host: 'https://tokenflux.dev',
+    })).resolves.toEqual({ ok: false, status: 409, error: 'rejected' })
+  })
+
+  it('rejects services that do not identify as tf protocol v1', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue(new Response(JSON.stringify({
+      ok: true,
+      service: 'other',
+      protocol: 1,
+    }), { status: 200 })))
+
+    await expect(findTfCli(undefined, 1_000)).resolves.toBeNull()
+  })
+})
diff --git a/frontend/src/utils/tfCliImport.ts b/frontend/src/utils/tfCliImport.ts
new file mode 100644
index 000000000000..6a4054d83004
--- /dev/null
+++ b/frontend/src/utils/tfCliImport.ts
@@ -0,0 +1,294 @@
+const TF_WEB_IMPORT_PROTOCOL = 1
+const TF_PORT_FIRST = 43110
+const TF_PORT_LAST = 43119
+const TF_DISCOVERY_TIMEOUT_MS = 30_000
+const TF_SESSION_MAX_AGE_MS = 10 * 60_000
+const TF_SESSION_PROOF_HEADER = 'X-TF-Session-Proof'
+const TF_SESSION_FRAGMENT = /^#tf=1\.(4311[0-9])\.([A-Za-z0-9_-]{22})$/
+
+interface LoopbackRequestInit extends RequestInit {
+  targetAddressSpace: 'loopback'
+}
+
+interface TfCliImportSession {
+  port: number
+  secret: ArrayBuffer
+  expiresAt: number
+}
+
+export interface TfCliTarget {
+  port: number
+  verified: boolean
+}
+
+export interface TfCliImportPayload {
+  key: string
+  host: string
+  key_name?: string
+  group_id?: number
+  group_name?: string
+}
+
+export type TfCliImportResult =
+  | { ok: true; status: 202 }
+  | { ok: false; status?: number; error: string }
+
+interface TfPingResponse {
+  service?: string
+  protocol?: number
+  proof?: string
+}
+
+let pendingSession: TfCliImportSession | null = null
+let sessionExpiryTimer: number | null = null
+const verifiedSessions = new WeakMap<TfCliTarget, TfCliImportSession>()
+
+function encodeBase64Url(bytes: Uint8Array): string {
+  let binary = ''
+  for (const byte of bytes) binary += String.fromCharCode(byte)
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+
+function decodeBase64Url(value: string): ArrayBuffer {
+  const base64 = value.replace(/-/g, '+').replace(/_/g, '/')
+  const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4)
+  const binary = atob(padded)
+  const bytes = new Uint8Array(binary.length)
+  for (let index = 0; index < binary.length; index++) bytes[index] = binary.charCodeAt(index)
+  return bytes.buffer
+}
+
+function clearSecret(secret: ArrayBuffer): void {
+  new Uint8Array(secret).fill(0)
+}
+
+function isKeysPath(pathname: string): boolean {
+  return pathname.replace(/\/+$/, '').endsWith('/keys')
+}
+
+// @project-doc docs/interfaces/tf_cli_web_import.md#session_fragment
+export function initializeTfCliImportSession(): boolean {
+  if (typeof window === 'undefined') return false
+
+  const fragment = window.location.hash
+  if (!fragment.startsWith('#tf=')) return getTfCliImportSession() !== null
+
+  window.history.replaceState(
+    window.history.state,
+    '',
+    window.location.pathname + window.location.search,
+  )
+  clearTfCliImportSession()
+
+  if (!isKeysPath(window.location.pathname)) return false
+
+  const match = TF_SESSION_FRAGMENT.exec(fragment)
+  if (!match) return false
+
+  try {
+    const port = Number(match[1])
+    const secret = decodeBase64Url(match[2])
+    const canonical = encodeBase64Url(new Uint8Array(secret))
+    if (secret.byteLength !== 16 || canonical !== match[2]) return false
+
+    pendingSession = { port, secret, expiresAt: Date.now() + TF_SESSION_MAX_AGE_MS }
+    sessionExpiryTimer = window.setTimeout(clearTfCliImportSession, TF_SESSION_MAX_AGE_MS)
+    return true
+  } catch {
+    return false
+  }
+}
+
+function getTfCliImportSession(): TfCliImportSession | null {
+  if (!pendingSession) return null
+  if (Date.now() >= pendingSession.expiresAt) {
+    clearTfCliImportSession()
+    return null
+  }
+  return pendingSession
+}
+
+export function clearTfCliImportSession(): void {
+  if (sessionExpiryTimer !== null && typeof window !== 'undefined') {
+    window.clearTimeout(sessionExpiryTimer)
+  }
+  sessionExpiryTimer = null
+  if (pendingSession) clearSecret(pendingSession.secret)
+  pendingSession = null
+}
+
+function createChallenge(): string {
+  const bytes = new Uint8Array(18)
+  crypto.getRandomValues(bytes)
+  return encodeBase64Url(bytes)
+}
+
+async function signSessionMessage(secret: ArrayBuffer, message: string): Promise<string> {
+  const key = await crypto.subtle.importKey(
+    'raw',
+    secret,
+    { name: 'HMAC', hash: 'SHA-256' },
+    false,
+    ['sign'],
+  )
+  const signature = await crypto.subtle.sign(
+    'HMAC',
+    key,
+    new TextEncoder().encode(message),
+  )
+  return encodeBase64Url(new Uint8Array(signature))
+}
+
+function equalProof(left: string, right: string): boolean {
+  if (left.length !== right.length) return false
+  let difference = 0
+  for (let index = 0; index < left.length; index++) {
+    difference |= left.charCodeAt(index) ^ right.charCodeAt(index)
+  }
+  return difference === 0
+}
+
+function loopbackRequest(init: RequestInit, signal?: AbortSignal): LoopbackRequestInit {
+  return {
+    ...init,
+    mode: 'cors',
+    cache: 'no-store',
+    credentials: 'omit',
+    redirect: 'error',
+    referrerPolicy: 'no-referrer',
+    signal,
+    targetAddressSpace: 'loopback',
+  }
+}
+
+async function pingTfCli(
+  port: number,
+  session: TfCliImportSession | null,
+  signal: AbortSignal,
+): Promise<TfCliTarget | null> {
+  try {
+    const challenge = session ? createChallenge() : ''
+    const query = challenge ? `?challenge=${encodeURIComponent(challenge)}` : ''
+    const response = await fetch(
+      `http://127.0.0.1:${port}/ping${query}`,
+      loopbackRequest({ method: 'GET' }, signal),
+    )
+    if (!response.ok) return null
+
+    const data = await response.json() as TfPingResponse
+    if (data.service !== 'tf' || data.protocol !== TF_WEB_IMPORT_PROTOCOL) return null
+
+    const target: TfCliTarget = { port, verified: false }
+    if (session && challenge && typeof data.proof === 'string') {
+      const expected = await signSessionMessage(
+        session.secret,
+        `tf-web-import-v1\n${port}\n${challenge}`,
+      )
+      target.verified = equalProof(data.proof, expected)
+      if (target.verified) verifiedSessions.set(target, session)
+    }
+    return target
+  } catch {
+    return null
+  }
+}
+
+// @project-doc docs/interfaces/tf_cli_web_import.md#session_proof
+export async function findTfCli(
+  signal?: AbortSignal,
+  timeoutMs = TF_DISCOVERY_TIMEOUT_MS,
+): Promise<TfCliTarget | null> {
+  if (signal?.aborted) return null
+
+  const controller = new AbortController()
+  const abort = () => controller.abort()
+  signal?.addEventListener('abort', abort, { once: true })
+  const timeout = window.setTimeout(abort, timeoutMs)
+
+  try {
+    const session = getTfCliImportSession()
+    if (session) {
+      const linked = await pingTfCli(session.port, session, controller.signal)
+      if (linked || controller.signal.aborted) return linked
+    }
+
+    const ports = Array.from(
+      { length: TF_PORT_LAST - TF_PORT_FIRST + 1 },
+      (_, index) => TF_PORT_FIRST + index,
+    )
+    const results = await Promise.all(
+      ports.map((port) => pingTfCli(port, null, controller.signal)),
+    )
+    return results.find((target): target is TfCliTarget => target !== null) ?? null
+  } finally {
+    window.clearTimeout(timeout)
+    signal?.removeEventListener('abort', abort)
+  }
+}
+
+function sessionProofExpired(session: TfCliImportSession | undefined): boolean {
+  return !session || session !== getTfCliImportSession()
+}
+
+export async function importKeyToTf(
+  target: TfCliTarget,
+  payload: TfCliImportPayload,
+  signal?: AbortSignal,
+): Promise<TfCliImportResult> {
+  const body = JSON.stringify({ ...payload, version: TF_WEB_IMPORT_PROTOCOL })
+  const headers: Record<string, string> = { 'Content-Type': 'application/json' }
+  const verifiedSession = verifiedSessions.get(target)
+  if (target.verified && sessionProofExpired(verifiedSession)) {
+    verifiedSessions.delete(target)
+    return { ok: false, error: 'session_expired' }
+  }
+
+  try {
+    if (verifiedSession) {
+      let proof: string
+      try {
+        proof = await signSessionMessage(
+          verifiedSession.secret,
+          `tf-web-import-v1\n${target.port}\nimport\n${body}`,
+        )
+      } catch {
+        verifiedSessions.delete(target)
+        return { ok: false, error: 'session_proof_unavailable' }
+      }
+      if (sessionProofExpired(verifiedSession)) {
+        verifiedSessions.delete(target)
+        return { ok: false, error: 'session_expired' }
+      }
+      headers[TF_SESSION_PROOF_HEADER] = proof
+    }
+
+    const response = await fetch(
+      `http://127.0.0.1:${target.port}/import`,
+      loopbackRequest({ method: 'POST', headers, body }, signal),
+    )
+    let data: { ok?: boolean; error?: string } = {}
+    try {
+      data = await response.json() as { ok?: boolean; error?: string }
+    } catch {
+      // A non-JSON local response is treated as an unknown service error.
+    }
+
+    if (response.status === 202 && data.ok === true) {
+      verifiedSessions.delete(target)
+      clearTfCliImportSession()
+      return { ok: true, status: 202 }
+    }
+
+    if (data.error === 'cancelled') clearTfCliImportSession()
+    return {
+      ok: false,
+      status: response.status,
+      error: typeof data.error === 'string' ? data.error : 'unexpected_response',
+    }
+  } catch (error) {
+    if (signal?.aborted || (error instanceof DOMException && error.name === 'AbortError')) {
+      return { ok: false, error: 'cancelled' }
+    }
+    return { ok: false, error: 'network_error' }
+  }
+}
diff --git a/frontend/src/views/user/KeysView.vue b/frontend/src/views/user/KeysView.vue
index 8bdb79e45983..7c02ee85d41a 100644
--- a/frontend/src/views/user/KeysView.vue
+++ b/frontend/src/views/user/KeysView.vue
@@ -442,6 +442,9 @@
               <button
                 class="key-action-menu-trigger flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-dark-700 dark:hover:text-white"
                 :class="{ 'bg-gray-100 text-gray-900 dark:bg-dark-700 dark:text-white': actionMenuKey?.id === row.id }"
+                aria-haspopup="menu"
+                :aria-expanded="actionMenuKey?.id === row.id"
+                :aria-controls="actionMenuKey?.id === row.id ? `key-action-menu-${row.id}` : undefined"
                 @click="openKeyActionMenu(row, $event)"
               >
                 <Icon name="more" size="sm" />
@@ -1224,6 +1227,12 @@
       @close="closeUseKeyModal"
     />
 
+    <TfCliImportDialog
+      :show="showTfCliImportDialog"
+      :api-key="tfImportKey"
+      @close="closeTfCliImportDialog"
+    />
+
     <KeyActionMenu
       :show="Boolean(actionMenuKey)"
       :api-key="actionMenuKey"
@@ -1231,6 +1240,7 @@
       :allow-import="!publicSettings?.hide_ccs_import_button"
       @close="closeKeyActionMenu"
       @use="openUseKeyModal"
+      @import-tf="openTfCliImportDialog"
       @import="importToCcswitch"
       @delete="confirmDelete"
     />
@@ -1415,6 +1425,7 @@ import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 	import Icon from '@/components/icons/Icon.vue'
 	import KeyActionMenu from '@/components/keys/KeyActionMenu.vue'
 	import UseKeyModal from '@/components/keys/UseKeyModal.vue'
+	import TfCliImportDialog from '@/components/keys/TfCliImportDialog.vue'
 	import EndpointPopover from '@/components/keys/EndpointPopover.vue'
 	import GroupBadge from '@/components/common/GroupBadge.vue'
 	import GroupOptionItem from '@/components/common/GroupOptionItem.vue'
@@ -1618,9 +1629,11 @@ const showDeleteDialog = ref(false)
 const showResetQuotaDialog = ref(false)
 const showResetRateLimitDialog = ref(false)
 const showUseKeyModal = ref(false)
+const showTfCliImportDialog = ref(false)
 const showCcsClientSelect = ref(false)
 const showColumnDropdown = ref(false)
 const pendingCcsRow = ref<ApiKey | null>(null)
+const tfImportKey = ref<ApiKey | null>(null)
 const selectedKey = ref<ApiKey | null>(null)
 const actionMenuKey = ref<ApiKey | null>(null)
 const actionMenuPosition = ref<{ top: number; left: number } | null>(null)
@@ -2205,6 +2218,16 @@ const closeUseKeyModal = () => {
   selectedKey.value = null
 }
 
+const openTfCliImportDialog = (key: ApiKey) => {
+  tfImportKey.value = key
+  showTfCliImportDialog.value = true
+}
+
+const closeTfCliImportDialog = () => {
+  showTfCliImportDialog.value = false
+  tfImportKey.value = null
+}
+
 const handlePageChange = (page: number) => {
   pagination.value.page = page
   loadApiKeys()
@@ -2302,7 +2325,7 @@ const openKeyActionMenu = (key: ApiKey, event: MouseEvent) => {
   if (!target) return
   const rect = target.getBoundingClientRect()
   const width = 192
-  const height = publicSettings.value?.hide_ccs_import_button ? 102 : 142
+  const height = publicSettings.value?.hide_ccs_import_button ? 138 : 178
   const padding = 8
   const left = Math.max(padding, Math.min(rect.right - width, window.innerWidth - width - padding))
   let top = rect.bottom + 4
diff --git a/frontend/src/views/user/__tests__/KeysView.spec.ts b/frontend/src/views/user/__tests__/KeysView.spec.ts
index c106a8907f82..c9feca63110f 100644
--- a/frontend/src/views/user/__tests__/KeysView.spec.ts
+++ b/frontend/src/views/user/__tests__/KeysView.spec.ts
@@ -57,6 +57,7 @@ const messages: Record<string, string> = {
   'keys.createKey': 'Create API Key',
   'keys.disable': 'Disable',
   'keys.enable': 'Enable',
+  'keys.importToTf': 'Import to TF CLI',
   'keys.apiKeyLimitReached': 'API key limit reached',
   'keys.created': 'Created',
   'keys.expiresAt': 'Expires',
@@ -320,6 +321,19 @@ const GroupOptionItemStub = {
   template: '<span data-test="group-option-item" :data-has-capacity="capacity ? \'true\' : \'false\'">{{ name }}</span>',
 }
 
+const TfCliImportDialogStub = {
+  name: 'TfCliImportDialog',
+  props: ['show', 'apiKey'],
+  emits: ['close'],
+  template: `
+    <div
+      v-if="show"
+      data-test="tf-cli-dialog-stub"
+      :data-key-name="apiKey?.name"
+    />
+  `,
+}
+
 const mountView = async (settle = true) => {
   const wrapper = mount(KeysView, {
     global: {
@@ -336,6 +350,7 @@ const mountView = async (settle = true) => {
         SearchInput: SearchInputStub,
         Icon: IconStub,
         UseKeyModal: true,
+        TfCliImportDialog: TfCliImportDialogStub,
         EndpointPopover: true,
         GroupBadge: true,
         GroupOptionItem: GroupOptionItemStub,
@@ -473,6 +488,21 @@ describe('user KeysView column settings', () => {
     expect(actionButtons.some((button) => button.text().includes('More'))).toBe(true)
   })
 
+  it('opens tf import from the More menu without a fragment session', async () => {
+    const wrapper = await mountView()
+
+    const moreButton = getButtonByText(wrapper, 'More')
+    expect(moreButton.attributes('aria-expanded')).toBe('false')
+    await moreButton.trigger('click')
+    await nextTick()
+    expect(moreButton.attributes('aria-expanded')).toBe('true')
+    expect(moreButton.attributes('aria-controls')).toBe('key-action-menu-1')
+    await getButtonByText(wrapper, 'Import to TF CLI').trigger('click')
+    await nextTick()
+
+    expect(wrapper.get('[data-test="tf-cli-dialog-stub"]').attributes('data-key-name')).toBe('test-key')
+  })
+
   it('shows a hidden column when toggled and persists the preference', async () => {
     const wrapper = await mountView()