Make the home add-device card clearer and clickable (#1968)

* Make the add-device card clearer and clickable

* Align pairing hierarchy with the shared palette rules

* Keep command emphasis across wrapped instruction lines

* Describe pairing focus and heading-only hover against current dev

* Use keyboard selection ground for the focused pairing field

Author: santoshkumarradha

docs/changes/unreleased/1968-pairing-card-hierarchy.md

@@ -0,0 +1,15 @@
+---
+kind: changed
+title: Make the add-device card clearer and clickable
+pr: 1968
+surface: [chat, docs]
+invalidates:
+  - "The add-device card toggled from clicks throughout its prose without hover feedback. Only the visible heading now toggles the instructions and it underlines under the pointer."
+  - "The add-device description repeated its title and the instructions had uniform emphasis. The card now separates the description from the steps and emphasizes the command."
+---
+
+The heading, supporting text, command and key hints use the existing theme's
+text hierarchy. Only the heading's visible cells respond to the pointer;
+description text and surrounding space stay passive. The editable link field
+uses dim placeholder text and a shaded focus state. The keyboard shortcut
+and pairing approval flow are unchanged.

internal/manual/chat/add-or-remove-a-computer.md

@@ -12,11 +12,11 @@ While you have only one device, home shows a card at the foot:
 
 ```
 + Add another device
-Add another device — pick up your work anywhere, exactly where you left it.
+Pick up your work anywhere, exactly where you left it.
 alt+d how
 ```
 
-Click **+ Add another device** to open the steps, or press `alt+d`. Click the heading or press `alt+d` again to close them:
+Click `+ Add another device` or press `alt+d` to open the steps. Click the heading or press `alt+d` again to close them. The heading underlines while the pointer is over it; the description and empty space do not act as buttons. The command `codeaf pair` stands out from the instructions, and the link field is shaded while it holds the keyboard:
 
 ```
 1. On the new device, install and run: codeaf pair

internal/tui3/app.go

@@ -5238,6 +5238,7 @@ func (a *app) route(msg tea.Msg) (tea.Model, tea.Cmd) {
 		// mean the same thing on every page, so the button under the pointer
 		// takes its ground wherever a person is standing (topnav.go's
 		// [app.headHover]).
+		a.hoverAddMachine(msg.Mouse().X, msg.Mouse().Y)
 		a.hoverDraftSeam(msg.Mouse().X, msg.Mouse().Y)
 		if a.headHover(msg.Mouse().X, msg.Mouse().Y) {
 			// AND THE HEAD TAKES THE POINTER OFF HOME'S PROJECT NAMES, which

internal/tui3/homeband_addmachine.go

@@ -47,7 +47,7 @@ const (
 	fleetAskTimeout = 5 * time.Second
 
 	addMachineHeading = "+ Add another device"
-	addMachinePitch   = "Add another device — pick up your work anywhere, exactly where you left it."
+	addMachinePitch   = "Pick up your work anywhere, exactly where you left it."
 	addMachineStepRun = "1. On the new device, install and run: codeaf pair"
 	addMachineStepPut = "2. It shows a link. Paste it here:"
 	addMachineField   = "> "
@@ -79,6 +79,7 @@ type addMachine struct {
 	asking bool
 	// open says the steps are showing.
 	open    bool
+	hovered bool
 	targets []addMachineTarget
 	focused bool
 	box     editor
@@ -134,6 +135,7 @@ func (a *app) toggleAddMachine() tea.Cmd {
 		return nil
 	}
 	m.open = !m.open
+	m.hovered = false
 	m.focused = m.open
 	a.touch()
 	return nil
@@ -159,11 +161,16 @@ func drawAddMachineBand(a *app, ctx bandContext) []string {
 		return nil
 	}
 	m := a.addMachine
-	rows := []string{ctx.pal.muted(fit(addMachineHeading, ctx.width))}
+	heading := ctx.pal.bold(ctx.pal.muted(fit(addMachineHeading, ctx.width)))
+	if m.hovered {
+		heading = ctx.pal.underline(heading)
+	}
+	rows := []string{heading}
 	for _, line := range wrap(addMachinePitch, ctx.width) {
 		rows = append(rows, ctx.pal.dim(fit(line, ctx.width)))
 	}
 	if m.open {
+		rows = append(rows, "")
 		rows = append(rows, a.addMachineHow(ctx)...)
 	}
 	key := addMachineShow
@@ -181,8 +188,10 @@ func drawAddMachineBand(a *app, ctx bandContext) []string {
 func (a *app) addMachineHow(ctx bandContext) []string {
 	var rows []string
 	for _, line := range []string{addMachineStepRun, addMachineStepPut} {
-		for _, wrapped := range wrap(line, ctx.width) {
-			rows = append(rows, ctx.pal.ink(fit(wrapped, ctx.width)))
+		text := ctx.pal.muted(line)
+		text = strings.ReplaceAll(text, "codeaf pair", ctx.pal.bold(ctx.pal.data("codeaf pair")))
+		for _, wrapped := range wrap(text, ctx.width) {
+			rows = append(rows, fit(wrapped, ctx.width))
 		}
 	}
 	line, _ := a.addMachineLine(ctx.width, ctx.pal)
@@ -208,6 +217,9 @@ func (a *app) addMachinePress(x, y, width int) (tea.Cmd, bool) {
 		a.touch()
 		return nil, true
 	}
+	if !a.addMachineAt(x, y, a.home.painted.lines) {
+		return nil, false
+	}
 	return a.toggleAddMachine(), true
 }
 
@@ -231,7 +243,14 @@ func (a *app) addMachineLine(width int, pal palette) (string, int) {
 	if b.empty() {
 		shown = "Paste pairing link"
 	}
-	line := pal.accent(addMachineField) + pal.ink(fit(shown, max(0, width-ansi.StringWidth(addMachineField))))
+	ink := pal.ink
+	if b.empty() {
+		ink = pal.dim
+	}
+	line := pal.accent(addMachineField) + ink(fit(shown, max(0, width-ansi.StringWidth(addMachineField))))
+	if a.addMachine.focused {
+		line = pal.selected(line, width)
+	}
 
 	return line, column
 }
@@ -285,3 +304,26 @@ func (a *app) addMachineInputKey(msg tea.KeyPressMsg) (tea.Cmd, bool) {
 	}
 	return nil, true
 }
+
+// addMachineAt resolves only the heading's painted cells, so description text
+// and blank space never promise to open the instructions.
+func (a *app) addMachineAt(x, y int, lines []string) bool {
+	if !a.at(pageHome) || !a.addMachineWanted() || y < 0 || y >= len(lines) {
+		return false
+	}
+	line := ansi.Strip(lines[y])
+	at := strings.Index(line, addMachineHeading)
+	if at < 0 {
+		return false
+	}
+	from := ansi.StringWidth(line[:at])
+	return x >= from && x < from+ansi.StringWidth(addMachineHeading)
+}
+
+func (a *app) hoverAddMachine(x, y int) {
+	next := a.addMachineAt(x, y, a.home.painted.lines)
+	if next != a.addMachine.hovered {
+		a.addMachine.hovered = next
+		a.touch()
+	}
+}

internal/tui3/homeband_addmachine_test.go

@@ -38,7 +38,7 @@ func addMachineFrame(a *app, width int) string {
 func TestAddMachineCardShowsForAFleetOfOne(t *testing.T) {
 	a := addMachineRig(&fakeApprovals{}, 1, true)
 	got := addMachineFrame(a, 80)
-	for _, want := range []string{"Add another device", "pick up your work anywhere, exactly where you left it.", addMachineShow} {
+	for _, want := range []string{"Add another device", "Pick up your work anywhere, exactly where you left it.", addMachineShow} {
 		if !strings.Contains(strings.Join(strings.Fields(got), " "), want) {
 			t.Fatalf("card lacks %q:\n%s", want, got)
 		}